render react component when prop changes

Question

how to force render our component when props changes? how to force render parent component when child component's props changes?

i searched a lot but all solutions are deprecated in new React version.

in my any pages (Route exact path="/post/:id" component={post}) for example (siteUrl/post/1) i am getting (:id) from props (this.props.match.params) and that works.

but when i am in single page component (Post) and this Route (siteUrl/post/1) when i am passing new Props to this component (:id).

props will changes but single component and parent component Will not re render...

normally when you want the parent to re-render on child changes you call some function on parent and then change a parent state which will make it re-render — Dhaval Chheda, Mar 05 '19 at 09:23
You should make use of `componentWillReceiveProps` or in newer versions use `getDerivedStateFromProps` and set your state appropriately that would trigger the re-render — Panther, Mar 05 '19 at 09:24
hear, i need child component re-render it's parent component... i searched a lot but all solutions was deprecated — Kourosh Neyestani, Mar 05 '19 at 09:24
alternatively, you can use `{ this.state.visible && (... you component to force rerender...) }` to render and then switch state `visible` value orderly to `false` and then to `true`. — Ponleu, Mar 05 '19 at 09:38

score 5 · Accepted Answer · answered Mar 18 '19 at 07:44

You may be using componentDidMount method.

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

but you need to use componentDidUpdate.

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

You can also use state and other React features without writing a class. read more: https://reactjs.org/docs/hooks-effect.html

score 2 · Answer 2 · answered Mar 05 '19 at 09:33

To make both parent and child re-render you need to path prop from parent to it's child.

   // parent using
   <Parent someProp={{someVal}} />

   // parent render:

   render() {
      const { someProp } = this.props
      <Child someProp={{someProp}} />
   }

this will surely re-render both components, unless you stated another logic in componentShouldUpdate

in your case Router looks like a parent for Parent so you should only path :id as a prop.

Make sure Router is at the top level, right under the App

score 0 · Answer 3 · answered Mar 05 '19 at 09:59

Important is ,that you initialise the someVal of the child first in the constructor

 public static getDerivedStateFromProps(
        nextProps,
        nextState
      ) {
        let { someVal } = nextProps;
        if (nextState.someVal !== someVal) {
          return {
            initialVal,
            someVal: someVal
          };
        }
        return null;
      }

After it will rerender on prop changes because the state changes

render react component when prop changes

3 Answers3