In this article we will see how to use the 

 function in React components to respond to changes. This can be external changes in a parent component or internal changes in a component’s state. We will see how to use the componentDidUpdate function to access DOM nodes and fetch data from a server.

For this article, we assume that you're already familiar with React components, and how to use props and state to control them.

If you're just getting started with React, you may want to look at the 

 for a more structured and detailed course.

 function is a part of a React component’s 

 It is called when a component got updated. This might happen if new props have been provided by a parent component or an internal state has been changed.

 and other life cycle methods apply only to React Class components. You cannot use them in your Functional components.

For functional components, you may use React hooks to achieve the same functionality. You may want to check out the 

  gets called after a render, which means that we can access DOM nodes in it. This function receives previous props and state as parameters. It can also access new props and state with 

class MyComponent extends React.Component {
  componentDidUpdate(prevState, prevProps) {
    // we access props with this.props
    // and state with this.state
    
    // prevState contains state before update
    // prevProps contains props before update
  }

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

 function is not called during the initial component’s render. If you need to do something during the initial render, use the 

The first scenario is when you need to access underlying DOM nodes of React components.

We use React Refs to access underlying DOM nodes. If you would like to learn more about React Refs, check out the 

How to Access DOM Nodes in React with Refs

Using DOM nodes we can get our component's position and dimensions, or initialize an animation. We can also pass the underlying DOM node to 3rd party non-React libraries that manipulate DOM.

Here’s an example in which we update the size of a green box every time a user clicks the "Resize" button:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { size: 100 };
    this.boxRef = React.createRef();
  }

  handleIncrementClick = () => {
    // set new state to force update
    this.setState((state, props) => ({ size: state.size + 10 }));
  };

  componentDidUpdate(prevState, prevProps) {
    // react to update and change the HTML element's size
    this.boxRef.current.style.width = `${this.state.size}px`;
    this.boxRef.current.style.height = `${this.state.size}px`;
  }

  render() {
    return (
      <div>
        <button onClick={this.handleIncrementClick}>Resize</button>
        <div ref={this.boxRef}></div>
      </div>
    );
  }
}

In this example, we’ve got a component that stores the 

 value in its state. Every time a user clicks the "Resize" button,  

 click handler increases the size by 10 and updates the state with the 

 function. This causes the component's update.

 function will run every time a component updates. That is, every time a user clicks the button and the 

 DOM element and directly set its width and height.

Another popular scenario is when you need to request data from a server or remote API due to changes in component’s 

 changes, it is not recommended. Usually, you can start a request for data in a handler that causes change. This way, you don't need to wait for a component to re-render to request data and your component will work faster.

As an example of fetching data from a server, let's show a list of projects for a selected user. A name of a user will be selected with buttons, while a list of user's projects will be fetched from a server.

 component. It shows two buttons for selecting users and the 

 component that will show a list of projects. We will get to the 

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { client: '' };
  }

  setAlice = () => {
    this.setState({ client: 'Alice' });
  };

  setJohn = () => {
    this.setState({ client: 'John' });
  };

  render() {
    return (
      <div>
        <button onClick={this.setAlice}>Alice</button>
        <button onClick={this.setJohn}>John</button>
        <ProjectsComponent client={this.state.client} />
      </div>
    );
  }
}

// We will implement this component shortly
class ProjectsComponent extends React.Component {
  ...
}

 parent component that stores client name in its state and pass this value to the child 

 will receive new props which will cause an update.

Now, let's take a look at the implementation of the 

 that shows a list of projects for a selected user:

class ProjectsComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { projects: [] };
  }

  // Emulate server data fetch. Return data after 300 ms timeout
  fetchData = client => {
    setTimeout(() => {
      this.setState({
        projects:
          client === 'Alice'
            ? ['Project Alpha', 'Project Beta']
            : ['Project Charlie', 'Project Delta']
      });
    }, 300);
  };

  componentDidUpdate(prevProps, prevState) {
    // check whether client has changed
    if (prevProps.client !== this.props.client) {
      this.fetchData(this.props.client);
    }
  }

  render() {
    // render a list of projects
    return (
      <div>
        <b>Projects for {this.props.client}</b>
        <ul>
          {this.state.projects.map(project => (
            <li>{project}</li>
          ))}
        </ul>
      </div>
    );
  }
}

 we check whether a client’s name has changed by comparing values in 

 has changed, we request a list of their projects from a server (function 

 emulates fetching from a server with a timeout). Once we’ve received the remote data, we update a component’s state with a list of projects.

It is important to note that updating the component's internal state will trigger a new update with new render and the 

 will be called again. We need to be careful with the 

 as it may cause an infinite update loop. In our case, we check the name of a client in props to avoid that.

Always check for a specific condition in the 

Monitoring changes in DOM with getSnapshotBeforeUpdate

 function, which is another life cycle function of React components.

 function is called right before the DOM update. It receives previous props and state as two arguments. In this function, we can capture the state of DOM nodes before an update. The returned value from the 

 function will be passed as the third argument to 

 along with previous props and state. This way, we can compare a DOM node value before and after an update and apply additional logic as needed.

For example, let's display a list of items. When there's a lot of items in a list, users can use a scroll:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [1, 2, 3, 4, 5, 6] };
  }

  handleClick = () => {
    const items = this.state.items;
    this.setState({ items: [...items, items.length] });
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Add items</button>
        <div className="container">
          <List items={this.state.items} />
        </div>
      </div>
    );
  }
}

class List extends React.Component {
  render() {
    return (
      <div>
        <strong>Usual List</strong>
        <ul className="messages">
          {this.props.items.map(i => (
            <li key={i}>{i}</li>
          ))}
        </ul>
      </div>
    );
  }
}

 property which is used to render a list of items. In our parent 

 component, we pass items from the state to 

Note how scrolling behaves in this example. When we add new items, it stays in the same place. To view newly added items we need to manually scroll down. This is because the 

 DOM element that React uses to display items stays the same after an update including a position of a scrolling pane.

Let's implement a list component that will control its scroll position when new items got added:

class ListWithScroll extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // If new items got added, return scroll position
    if (prevProps.items.length < this.props.items.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }

    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // if snapshot is available, use it to adjust scroll position
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div>
        <strong>List with Scroll</strong>
        <ul ref={this.listRef} className="messages">
          {this.props.items.map(i => (
            <li key={i}>{i}</li>
          ))}
        </ul>
      </div>
    );
  }
}

 component that returns the scroll position from the 

 function right before the DOM node update. The 

 function receives that value as the third parameter. We use that snapshot value to amend the scroll position of the 

You can see in this example, how a usual list and a list with scroll support work. By adjusting a scroll position we allow users to see newly added items without additional manual scrolling.

Minimizing Updates with shouldComponentUpdate

If you want to optimize the performance of your component, there is the 

 function that is being called before an update.

 to confirm that an update should occur. You can override this function and return 

 if an update is not required. React will take the result of 

 function receives values of next properties and next state as arguments. We can use 

 to access current properties and state. If React decides to skip the update for a component, the 

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
	// add condition to check whether need to update
    // return false to hint React to avoid update
    if (this.props.name !== nextProps.name) {
      return false;
    }

    return true;
  }

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

 property to define whether a component should be updated.

Using React.PureComponent for performance

 as a base class for a component instead of implementing the 

 class that we usually use as a base class for components. The difference is that 

. It performs a shallow comparison of props and state  to define whether an update is needed. A shallow comparison means that it takes all properties of props and state objects and checks that next and current values are strictly equal.

class MyComponent extends React.PureComponent {
  // we don't need to implement shouldComponentUpdate
  // React.PureComponent does that
  
  render() {
    return <div></div>;
  }
}

In this example, we inherit our component's class from the 

 does that. The component will check its props and state in its 

 implementation to define whether an update is required.

If component's props and state haven't changed, 

 tracks all props and state so you won't have to modify your 

 function every time you add new property of a state value to a component.

 is a part of a React component life cycle. We use it to react to external changes in component's props or internal state changes. With the 

 you can modify the underlying DOM nodes, request remote data, and update the internal state of your component.

Here are additional resources that will help you to learn more about 

AUTHOR

Dmitry Rogozhny

In this article we will see how to use the componentDidUpdate function in React components to respond to changes. This can be external changes in a parent component or internal changes in a component’s state. We will see how to use the componentDidUpdate function to access DOM nodes and fetch data from a server.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Using componentDidUpdate in React

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript