React not rendering after props (list of object) is updated

react component not updating on props change
react lifecycle diagram
componentdidupdate setstate
componentwillreceiveprops
react re-render when props change
react class component
react component not updating on state change
react native lifecycle

I have state in redux (a list of object), and I have an action to add blank object to the list. But whenever I dispatching the action React doesn't response to the changed props. I tried to log console in componentDidUpdate, shouldComponentUpdate it doens't log a changed props.

this is the action

function addNewBlankObject() {
  const newBlankObject= {
    field1: "",
    field2: ""
  }
  return {type:'ADD_BLANK_OBJECT', newBlankObject: newBlankObject}
}

this is the reducer

case 'ADD_BLANK_OBJECT':
      var listOfObject = state.listOfObject;
      listOfObject.push(action.newBlankObject);
      return state;

this is the redux props mapper

function mapStateToProps(state) {
  console.log(state.listOfObject); //check if state updated
  const listOfObject = state.listOfObject;
  return {
    listOfObject,
  }
}

export default connect(mapStateToProps)(AComponent);

I tried to log the props in above method, it does update the state, a blank object is added to the list, thus the props is changed right? why React doesn't response? Is it because the state is a array?

The state reference it not getting changed.Its remain same. Redux do shallow comparison to decide to update the state or not.

State update in reducers should be like this.

case 'ADD_BLANK_OBJECT':

      return [
        ...state.listOfObject,action.newBlankObject
      ]

Please find more here

How does React decide to re-render a component?, method, called with nextProps as the first argument, and nextState is the second. In your example you're mutating the this.props object which is not allowed because React won't notice the change. The props do indeed change but the component is unaware of this. That's why you need to forcefully trigger an update, either by calling setState or forceUpdate. Then, React will see the new value for this.props and use it.

Return new object in reducer, not mutate existing one.

Updating state of a parentless component in React, As far as I know changing props doesn't cause a component to re render. The way I can get it to re-render is to update the state of the child component with the new mutating the this.props object which is not allowed because React won't notice the change. If you don't initialize it then you get the following warning: Is there some way to force React to update the prop, or otherwise rerender the ChoiceFields object?--UPDATE--I was copying this.props.options into this.state.options, and using state to keep track of whether or not an option was selected. Per @superfell's recommendation, I kept the object array in props and calculated which one was selected in

You should use componentWillReceiveProps, always put the redux state which has updates in the component state and with componentWillReceiveProps, update the state.

class AComponent extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            listOfObject: props.listOfObject
        };
    }

    componentWillReceiveProps(nextProps) {
        let state = this.state;
        state.listOfObject = nextProps.listOfObject;
        this.setState({ state });
    }

    render() {
        return (
            <div></div>
        );
    }
}

function mapStateToProps(state) {
    console.log(state.listOfObject); //check if state updated
    const listOfObject = state.listOfObject;
    return {
      listOfObject,
    }
  }

  export default connect(mapStateToProps)(AComponent);

Will a stateless component re-render if its props have not changed , (Both the old lifecycle names and the new aliases will work in this The new static getDerivedStateFromProps lifecycle is invoked after a It can return an object to update state , or null to indicate that the new props do not  Not passing the previous props to this function is a step toward freeing up memory in future versions of React. (If React does not need to pass previous props to lifecycles, then it does not need to keep the previous props object in memory.)

React 16 Lifecycle Methods: How and When to Use Them, An update can be caused by changes to props or state. render() will not be invoked if shouldComponentUpdate() returns false. Initializing local state by assigning an object to this.state . componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). listRef.current; return list. 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.

Props change does not re render · Issue #17 · uberVU/react-guide , Do Hooks replace render props and higher-order components? React Redux since v7.1.0 supports Hooks API and exposes hooks like useDispatch or useSelector . is just no way to make Hooks work well — and longer names will discourage people setState in a class, which merges the updated fields into the object. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately. setState() does not always immediately update the component. It may batch or defer the update until later.

Update on Async Rendering – React Blog, So in your code, when you map over state.list , your actually mapping the old The problem seems to be the chart does not re-render the updated state values. it is an array that contains objects, so all the vote data goes into the first It gives you a live view of the State and Props for each Component as  Note: As of React 16, componentWillReceiveProps() is deprecated, meaning if you are using that version or higher in your project, this is not good advice for you. In the React world, forcing a re-render is frowned upon. You should let the DOM take care of itself when React perceives changes to state or props. In order to follow these patterns, we sometimes have to do stuff that seems a little

Comments
  • componentDidUpdate and shouldComponentUpdate is also not invoked, how can I update the state? and, isn't using redux mean the state is stored with redux?
  • what you are after is changing the redux state, and it always call componentWillReciveProps. And yes your are right, if your component does not have any behaviour you sould use stateless component, but in the example i share, u have to store it in internal state.
  • I try to console the props in componentWillReceiveProps, but it doesn't log anything, maybe it wasn't invoked too. I'm afraid something in my code is causing this, I'll update the question if I found something.