Search code examples
reactjsreact-hookscomponentsjsx

React useEffect inside parent component doesnt rerender by changes inside child

I have an App component that returns only a React component called Home. Inside the App component I have a useEffect that has no dependancy, which I expect to re-render when something changes in the Home component, but this doesn't happen. Doesn't React support such a thing?

Solution

  • This is not supported out of the box. The child will rerender when parent rerenders but not the other way around.

    If every parent rerenders when a child rerender, then even a tiny button state change will cause the whole tree to rerender.

    You have callbacks that can help you get around this. The child should be passed a callback function as a prop. Inside this callback function body the parent state will be updated. So now when this function runs (from within the child). The parent also rerenders.