How to re-render a parent from a children component with hook?

're render child components on parent state change
react prevent child re-render
force render hook
update parent state from child react
useeffect
re-render component after state change
react hooks too many 're renders
how to pass data from child to parent in react hooks

I would like to force my parent to re-render the page when I click on a button from a child component. (I don't use redux because I don't have the time to learn it in my project, so I use localStorage. Unfortunately React don't see when a change is operated on local Storage, so he don't re-render. It's why I would like to force it to re-render my page (to have the right content).)

I tried to use hook with the function useState to do it but it's not working and I don't know why... (Nothing change in my page)

This is my parent page: (just the code important)

const[reload, setReload] = useState(false);
...
else if (user) { contents = [<Message_UserIdentified user={user} callBack={setReload}/>, contentform]; }

This is my child component:

const Message_UserIdentified = (props) => {
    let user = props.user;
    return (
        <Alert color="primary" className="alert alert-dismissible alert-info">
            <h4>Welcome {!user ? "" : user.firstname} {!user ? "" : user.lastname}</h4>
            If you are not {!user  ? "" : user.firstname} click <a onClick={() => {localStorage.removeItem('idUser'); props.callBack(true);}}>here.</a>
        </Alert>
    );
}

Why my parent page don't want re-render ? Thanks in advance.


I have created a proof of concept of what you are trying to achieve and it works:

https://codesandbox.io/s/weathered-smoke-ojr5j

probably there's something else in your code that we can't see that's preventing the component to re render

Change Parent Component State from Child using hooks in React , How do you pass data from child to parent in react hooks? React hooks are introduced in React 16.8. If you are familiar with the class components then there is no difference to change the parent component state from child component. In both cases, you have to pass the callback function to the parent. Let’s take a very simple example to understand it.


The reload state variable in your parent component is strictly local to it; the child can't see it.

I've been using React Hooks for about 2 months now. The learning curve, at times, has been steep but I'm now getting really proficient at it.

A companion technology to Hooks called Context API is perfect for your needs. It's what you should be using rather than local storage because both components can access it. Your child component would set the equivalent of reload in the Context to true and your parent would have a useEffect function that would have reload as a dependency. Thus, when reload is changed from false to true, the useEffect function in the parent would be fired and run the code you desire.

Early on, I very much benefitted from this video series: https://www.youtube.com/watch?v=6RhOzQciVwI&t=46s Watch the first few videos and you should quickly understand how to implement the Context API in your functional React components.

How does React Hooks re-renders a function Component?, How do you update parent state from child component in react hooks? When a ticker is being removed, the watchlist state gets updated forcing the Watchlist component its children to re-render. We have seen this default behavior in the earlier useState example.


Your child component can have a prop which directly pass setReload to it.

However one common usage is that, setReload can be associated with an event, ex. onReload. You can pass a prop onReload to the child instead.

  <Child onReload={() => { setReload() }} />

Inside onReload implementation, you can call setReload.

how to change the state of parent component from child Component , But I am maintaining the parent component state using useState hook . unnecessarily re-rendering the child component (because handleChange is created  Thus your component won't re-render. Use parent component to re-render child in React. 4. React Testing if Hook State was Updated by a Child Component. 0.


React: Re-render child components on parent state change, I would just like to reiterate the some gotchas and best practices.. “React: Re-​render child components on parent state change” is published by  Previous is ein component, the child component for app component. Do not pay too much attention to the details of the state object. It doesn't matter. The thing is we are setting the state for parent component from within a useEffect hook inside child component, and this will inevitably cause an infinite loop.


React Hooks - Understanding Component Re-renders, What would happen — when parent and child components have their own local state (via useState) and parent's state gets changed ? Let's  It's mainly cause of you have 2 different "children". this.props.children <Child/> They're not the same thing, first one is a prop passed down from Application -> DynamicParent, while the second one is a Component rendered in StaticParent, they have separate rendering/life cycles.


Updating child without re-rendering parent in react hooks · React, Hi, I would like re-render a child component without re-rendering the parent component. A simplified version of my code is below: Parent: I want  This will define a new function reference for props.clicked on each re-render of the parent function. This will cause the props for Person to be changed on each render, causing Person to also re-render. Since you're not currently using id in personSelectedHandler, you could just omit the argument and keep the function reference constant: