Plasmo rerendering CSUI infinitely and using up PC memory
I have the code below that uses and anchorlist to inject multiple instances of the same component. Anchorlist is supported by plasmo but for some reason it runs in an infinite rerender loop:
import React, { useEffect, useRef, type FC } from 'react';
// import './components/SearchResults/SearchResults.scss';
import type { PlasmoCSConfig, PlasmoCSUIJSXContainer, PlasmoCSUIProps, PlasmoGetInlineAnchorList, PlasmoGetRootContainer, PlasmoRender } from 'plasmo';
import rootCss from 'data-text:../root.scss';
import { createRoot } from 'react-dom/client';
export interface SearchResultsProps {
index?: number; // Add index to the props
id?: string;
}
const SearchResults = ({ index, id }: SearchResultsProps) => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
console.log(containerRef.current);
}, []);
return <div id={id} ref={containerRef} className={`SearchResults`}>SearchResults (Index: {index})</div>;
}
export default SearchResults;
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
// console.log('%c calling getInlineAnchorList', 'color: red; font-weight: bold;');
const elements = document.querySelectorAll(`[data-testid="regular-listings"] > div a:first-of-type > div > div:nth-of-type(3) > h2`);
return elements;
// return Array.from(elements).map((element, index) => {
// element.setAttribute('data-card-id', index.toString());
// return {
// element,
// insertPosition: 'afterend',
// props: { index } // Pass the index as a prop
// }
// });
}
export const getStyle = () => {
const style = document.createElement("style")
style.textContent = `
${rootCss}
`;
return style;
}
export const getRootContainer = ({ anchor }) => anchor?.element;
import React, { useEffect, useRef, type FC } from 'react';
// import './components/SearchResults/SearchResults.scss';
import type { PlasmoCSConfig, PlasmoCSUIJSXContainer, PlasmoCSUIProps, PlasmoGetInlineAnchorList, PlasmoGetRootContainer, PlasmoRender } from 'plasmo';
import rootCss from 'data-text:../root.scss';
import { createRoot } from 'react-dom/client';
export interface SearchResultsProps {
index?: number; // Add index to the props
id?: string;
}
const SearchResults = ({ index, id }: SearchResultsProps) => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
console.log(containerRef.current);
}, []);
return <div id={id} ref={containerRef} className={`SearchResults`}>SearchResults (Index: {index})</div>;
}
export default SearchResults;
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
// console.log('%c calling getInlineAnchorList', 'color: red; font-weight: bold;');
const elements = document.querySelectorAll(`[data-testid="regular-listings"] > div a:first-of-type > div > div:nth-of-type(3) > h2`);
return elements;
// return Array.from(elements).map((element, index) => {
// element.setAttribute('data-card-id', index.toString());
// return {
// element,
// insertPosition: 'afterend',
// props: { index } // Pass the index as a prop
// }
// });
}
export const getStyle = () => {
const style = document.createElement("style")
style.textContent = `
${rootCss}
`;
return style;
}
export const getRootContainer = ({ anchor }) => anchor?.element;
0 Replies