0
161
ViewsRender problem when lifting state up in React
After reading the documentation and good practices. I decided to lift up the state in my code for a specific page. When I do this, I cause my app to be laggy because now every time I am updating a specific field in a form, it triggers to re-render every others forms field along with other widgets.
I tried to use, memo on each of my components but apparently it has no effect and the re-render is triggered each time.
The problem is that the component in the picture is very 6 levels down compared to where I am declaring and updating the state. So, when I want to update the value of this specific component, bassically, it setState my whole page.
1 answers
Answer question0
useEffect hook without dependency, will continue to render your component again and again, So if you want to render your component once use useEffect with empty array as dependency like this -
useEffect(()=>{
//code will run once after rendering
},[]);
and if you want to re-render a component base on some condition then you can use useEffect with the dependency, if that dependency value is change it will trigger the component to re-render. For eg:-
const [dependency,setDependency] = useState();
useEffect(()=>{
//when value of dependency will change, code will run and trigge render
},[dependency])