In React what's the best way to render a Component differently the first time it appears on the page?

I have some React Components that are going to be used a lot all over my App.

I'd like that only the first time they get printed in the DOM, they return as

<symbol id="SVGComponent"><SVGComponent></symbol><use href="#SVGComponent" />

while every other following printing should be only <use href="#SVGComponent" /> since the symbol has already been declared in the page

const [firstTime, setFirstTime] = useState(true);    useEffect(() => { setFirstTime(false) }, []);  

if (firstTime) {      return (<symbol id="Component"><Path /></symbol>);  }  else {      return(<use href="#Component"/>);  }  

This is my code so far but the condition always return false.

How is that possibile in React with useEffect? Thanks in advance for your help

https://stackoverflow.com/questions/66573270/in-react-whats-the-best-way-to-render-a-component-differently-the-first-time-it March 11, 2021 at 05:41AM