how to prevent children component re render, when state/props parent component changing?

componentwillreceiveprops
react prevent child component from rendering
shouldcomponentupdate hooks
react prevent re-render on state change
re-render child components on parent state change
forceupdate
redux prevent 're render
react functional component prevent re-render

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

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

How to prevent a rerender in React, How to prevent a rerender in React React components and their child components rerender if state or props change. don't rerender with every rerender of their parent component. In the previous case, you have used shouldComponentUpdate to prevent a rerender of the child component. It can be used to prevent component renderings on a fine-grained level: You can apply equality checks for different props and state, but also use it for other kind of checks.

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.

How to avoid multiple re-renders in React (3 lines of code), If React state changes in the parent component, every single sub component would re-render by default. What if the  This applies to the children’s state but not their props. So if a child component is internally managing some aspect of its state (with a setState of its own), that will still be updated. But if the parent component returns false from shouldComponentUpdate it will not pass the updated props along to its children, and so the children will not re-render, even if their props had updated.

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

Props change does not re render · Issue #17 · uberVU/react-guide , I find that, if a parent container changes the props passed in to a child component​. The child component does not re-  react-native this.setState not working. reactjs,react-native. Don't explicitly call render. React will automatically do a re-render when state or props change, so there's no need for this.

React: Re-render child components on parent state change, So on the first construction of SomeComponent the prop someProp COULD be set as an initial state. But  Post-Render with componentDidUpdate(). Continuing the trend of corresponding methods, the componentDidUpdate() is the Update version of componentDidMount().Once again, we can access the Native UI stack, interact with our refs and if required start another re-render/update 1.

How to Update React States in order to avoid useless rendering?, Simple Inner Component State Update Change State With Callback (state in father component) both props and state and re-render only if it's necessary. PureComponent make sure all child components are also pure. Imagine you have a React and Redux project with two components, a parent and a child. The parent component passes some props to the child component. When the child component receives those props, it should call some Redux action which changes some of the props that were passed from the parent asynchronously. Here are the two components: Parent Component class Parent extends React.Component

Lifting State Up – React, Often, several components need to reflect the same changing data. It accepts the celsius temperature as a prop, and prints whether it is enough to boil the water: It will handle the change by modifying its own local state, thus re-​rendering  Anyways, let's get on with the best method of forcing re-renders! Key-changing to force re-renders of a component. Finally, here is the very best way (in my opinion) to force Vue to re-render a component. You take this strategy of assigning keys to children, but whenever you want to re-render a component, you just update the key.

Comments