1

right now im have tree component like this

<UserOrderApproval>
  <Table>
    <TableRow> 
      <ComponentList />
    </ChildrenProps1>
  </Parent>
</UserOrderApproval>    

im take props from redux in UserOrderApproval component, and passing that props to every children component. The problem, when children component make some change in redux, the state from UserOrderApproval component will change & make all children component re render & make component life cycle run again. How to do prevent this?

How best practice to passing props from parent to nested children like this?

Many Thanks

Endy Santoso
  • 591
  • 7
  • 21

3 Answers3

1

As KuchBhi said, you'll need to use the shouldComponentUpdate lifecycle method.

shouldComponentUpdate is called any time when new props or state are passed to the component and by default returns true (might only return true for updated props, not 100% sure). The method accepts two parameters: nextProps and nextState. You can then compare these to this.props and this.state to decide whether you should update or not.

The default/typical implementation of this method is something along the lines of this (pseudo):

shouldComponentUpdate(nextProps, nextState) {
  //Really it's a deeper equality check, not just the props/state object
  return this.props !== nextProps || this.state !== nextState;
}

What you can do as an alternative is build this out a bit more with cases where false is returned. Here is an example from one of my projects where I only want to rerender when two specific props are different:

shouldComponentUpdate(nextProps) {
  const minUpdated = this.props.min !== nextProps.min;
  const maxUpdated = this.props.max !== nextProps.max;
  return minUpdated || maxUpdated;
}

The component also has the props such as scale, align, width, etc. but I don't want to update when I receive those as new props so I don't check to see if they're not equal.

You could essentially just return false in this method and never update after the initial load, but I would avoid that as it defeats the purpose of react.

edit: As varoons said, this is likely a great scenario for you to use the new context API and I highly recommend looking into it, but it is useful to know about component lifecycle methods as well.

Ryan - Llaver
  • 528
  • 4
  • 19
0

This is a good scenario to use React's context api as this seems like a prop drilling case - You are passing data down to components that do not use it. You could make UserOrderApproval(assuming it is the parent connected to the global state/redux) the context provider and ComponentList the consumer. This way only the components handling/using the data will re-render.

https://reactjs.org/docs/context.html

https://scotch.io/tutorials/get-to-know-reacts-new-context-api

varoons
  • 3,807
  • 1
  • 16
  • 20
0

Use shouldComponentUpdate(), pure components, or connect redux to only the child components that need them.

https://reactjs.org/docs/react-component.html#shouldcomponentupdate

https://reactjs.org/docs/react-api.html#reactpurecomponent

CodeDraken
  • 1,163
  • 6
  • 12
  • shouldComponentUpdate only for root component or children? who is a better, passing method to change state/props from a parent, or children have self-method to do that? Thanks – Endy Santoso Dec 18 '18 at 01:25