CODEWITHSUNDEEP
javascriptreactjs
JaxProx
JaxProx

Reputation: 15

shouldComponentUpdate() is not being called

Problem

I've parent class which contains list of items and renders component for each item of the list. When some item has been changed (even only one), all items in the list are being rerendered.

So I've tried to implement shouldComponentUpdate(). I am using console.log() to see if it is called but I can't see the log. I've found question shouldComponentUpdate is not never called and tried to return return (JSON.stringify(this.props) !=JSON.stringify(nextProps)); but component still renders itself again. So I've tried just to return false (like do not ever update) but it still does. As the last try I've used PureComponent but it is still being rerendered.

Question

How can I stop children re-rendering if the parent list changes and why is ShouldComponentUpdate never called?

Edit

I've noticed something what I didn't mention in question, I'm sorry for that. I am using context. If I don't use context -> it's ok. Is there any chance to stop re-render while using context? (I'm not using context on updated item - values of context didn't change).

Example

I've parent class which iterates list and renders TaskPreview component for each item of list:

class Dashboard extends React.Component
{
   constructor(props) {
      this.state = {
         tasks: {},
      };
   }

   onTaskUpdate=(task)=>
      this.setState(prevState => ({
         tasks: {...prevState.tasks, [task._id]: task}
      }));

   // ... some code

   render() {
      return (
         <div>
             {(!Object.entries(this.props.tasks).length)
                ? null
                : this.props.tasks.map((task,index) => 
                     <TaskPreview key={task._id} task={task} onChange={this.onTaskUpdate}/>
             })}
         </div>
      )
   }
}

and I've children TaskPreview class:

class TaskPreview extends React.Component
{
   shouldComponentUpdate(nextProps) {
        console.log('This log is never shown in console');
        return false; // just never!
   }

   render() {
        console.log('task rendered:',this.props.task._id); // indicates rerender
        return(<div>Something from props</div>);
   }
}

TaskPreview.contextType = TasksContext;
export default TaskPreview;

As @Nicolae Maties suggested I've tried to use Object.keys for iteration instead of direct map but it still doesn't call "shouldComponentUpdate" and still being re-rendered even if there is no changes.

Updated code:

render() {
      return (
         <div>
             {(!Object.entries(this.props.tasks).length)
                ? null
                : Object.keys(this.props.tasks).map((key,index) => {
                     let task = this.props.tasks[key];
                     <TaskPreview key={task._id} task={task}/>
                }
             })}
         </div>
      )
   }

Upvotes: 0

Views: 2858

Answers (6)

Jax-p
Jax-p

Reputation: 8531

Component is being re-rendered because of .contextType.

TaskPreview.contextType = TasksContext;

Also as is mentioned in documentation:

The propagation from Provider to its descendant consumers (including .contextType and useContext) is not subject to the shouldComponentUpdate method, so the consumer is updated even when an ancestor component skips an update. Source: reactjs.org/docs/context

You have to use context somehow else or do not use it at all.
You can use Context.Consumer which won't force re-render of current component but it might force re-render of its children.

<TasksContext.Consumer>
  {value => /* render something based on the context value */}
</TasksContext.Consumer>

Upvotes: 2

Saeed Shamloo
Saeed Shamloo

Reputation: 6554

I tried with below code snippet, shouldComponentUpdate worked as I expected. Could you share your Dashboard initial props ?

class Dashboard extends React.Component {
  constructor(props) {
    this.state = {
      tasks: {}
    };
  }

  onTaskUpdate = task =>
    this.setState(prevState => ({
      tasks: { ...prevState.tasks, [task._id]: task }
    }));

  // ... some code

  render() {
    return (
      <div>
        {!Object.entries(this.props.tasks).length
          ? null
          : Object.keys(this.props.tasks).map((key, index) => {
              let task = this.props.tasks[key];
              return (
                <TaskPreview
                  key={task._id}
                  task={task}
                  onChange={this.onTaskUpdate}
                />
              );
            })}
      </div>
    );
  }
}

class TaskPreview extends React.Component {
  shouldComponentUpdate(nextProps) {
    console.log("This log is never shown in console");
    return nextProps.task._id != this.props.task._id;
  }

  render() {
    console.log("task rendered:", this.props.task); // indicates rerender
    return (
      <button onClick={() => this.props.onChange(this.props.task)}>
        Something from props
      </button>
    );
  }
}

my initial props for Dashboard component is : 

 <Dashboard  tasks={{test:{_id:'myId', description:'some description'}}}/>

Upvotes: 0

Udith Gunaratna
Udith Gunaratna

Reputation: 2111

In the shouldComponentUpdate() method of your TaskPreview component, you should check if the next props have changes in comparison to the current props. Then if there are changes, return true to update the component, otherwise false.

The following example compares all the fields of props object with the new props object. But you can only check the props you are interested in.

shouldComponentUpdate(nextProps) {
    return  !!(Object.keys(nextProps).find(key => nextProps[key] !== this.props[key]));
}

Upvotes: 0

Rahmat Anjirabi
Rahmat Anjirabi

Reputation: 968

use from pureComponent and array as state:

class Dashboard extends React.PureComponent
{
   constructor(props) {
      this.state = {
         tasks: this.props.tasks
      }
   }

   onTaskUpdate=(task)=>
      this.setState(prevState => ({
         tasks: [...prevState.tasks, task] // render only new task
      }));

   render() {
       const {tasks} = this.state
      return (
         <div>
               {tasks.map(task => <TaskPreview key={task._id} task={task} />)}
         </div>
      )
   }
}

class TaskPreview extends React.PureComponent
{
   render() {
        console.log('task rendered:',this.props.task._id); // indicates rerender
        return(<div>Something from props</div>);
   }
}

Upvotes: 0

vsvk
vsvk

Reputation: 59

Instead of return (JSON.stringify(this.props) != JSON.stringify(nextProps)); in your shouldComponentUpdate() life cycle, try specifying tasks object like this return (JSON.stringify(this.props.tasks) != JSON.stringify(nextProps.tasks));

Upvotes: 1

debel_vegetarianec
debel_vegetarianec

Reputation: 44

Maybe react is creating new instances of your component and replaces the old instances with them. That's why you're probably not getting your lifecycle method invoked. That can happen if the key property you're assigning in the map always changes.

Upvotes: 0

Related Questions