How to Update React Components

In React, components update dynamically to reflect changes in data and user interactions, a process known as re-rendering. This article explains the primary mechanisms that trigger a React component update—specifically focusing on state changes, prop updates, and context changes—and provides clear examples of how these updates occur in modern functional components.

1. Updating State with useState

The most common way to update a React component is by changing its internal state. In functional components, this is achieved using the useState hook. When the state setter function is called, React schedules a re-render of the component with the new state value.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, clicking the button calls setCount, which updates the count state and forces the Counter component to re-render and display the updated value.

2. Receiving New Props

A component will also update when its parent component passes down new props. Whenever the parent component re-renders and changes the props sent to the child, the child component automatically re-renders to reflect those new values.

// Parent Component
function Parent() {
  const [theme, setTheme] = useState('light');

  return (
    <div>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
      <Child theme={theme} />
    </div>
  );
}

// Child Component
function Child({ theme }) {
  return <p>The current theme is {theme}</p>;
}

Here, whenever the Parent state changes, the theme prop passed to the Child changes, causing the Child component to update.

3. Consuming Context Changes

React’s Context API allows you to share data across the component tree without passing props manually. When the value of a Context.Provider changes, all descendant components that consume that context via the useContext hook will automatically update.

import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

function App() {
  const [user, setUser] = useState('Guest');

  return (
    <UserContext.Provider value={user}>
      <Profile />
      <button onClick={() => setUser('Jane Doe')}>Log In</button>
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);
  return <h1>Welcome, {user}</h1>;
}

When the user state in App changes, the Profile component updates because it consumes UserContext.

4. Forcing an Update with Keys

Sometimes you need to completely reset a component and its state rather than just updating it. You can force a component to remount (unmount and mount again) by changing its key prop. React uses the key attribute to identify components; if the key changes, React treats it as a brand-new component.

// Changing the key forces the component to destroy its old state and render fresh
<UserProfile key={userId} />