When you put the somevariable outside of React's control, changing the value of somevariable would not trigger components depending on that value to re-render.
e.g.)
You can fork and try it yourself
letsomevariable;constChild=({somevariable})=>{useEffect(()=>{console.log(`Child rendering with somevariable=>`,somevariable);});return<h1>{somevariable}</h1>;};asyncfunctionfetchData(){return"some data";}constSomeComponent=()=>{const[state,setState]=useState({});useEffect(()=>{fetchData().then(data=>setState({data}));},[]);useEffect(()=>{//update `somevariable` whenever the state changessomevariable=state.data;},[state]);constclickMe=()=>{console.log(somevariable,state);//do something to somevariable};return(<><buttononClick={clickMe}>Click Me </button><Childsomevariable={somevariable}/></>);};
You can see that Child that depends on the change of somevariable does NOT render, as somevariable is not a state tracked by React.
The demo below doesn't render the Child component (with <h1>{somevariable}</h1> element)
Can you post a runnable code (possibly forking the sandbox) that causes the infinite loop?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
When you put the
somevariable
outside of React's control, changing the value ofsomevariable
would not trigger components depending on that value to re-render.e.g.)
You can fork and try it yourself
You can see that
Child
that depends on the change ofsomevariable
does NOT render, assomevariable
is not a state tracked by React.The demo below doesn't render the
Child
component (with<h1>{somevariable}</h1>
element)Can you post a runnable code (possibly forking the sandbox) that causes the infinite loop?