[ You Might Not Need an Effect  ](/learn/you-might-not-need-an-effect "You Might Not Need an Effect")
    * [ Lifecycle of Reactive Effects  ](/learn/lifecycle-of-reactive-effects "Lifecycle of Reactive Effects")
    * [ Separating Events from Effects  ](/learn/separating-events-from-effects "Separating Events from Effects")
    * [ Removing Effect Dependencies  ](/learn/removing-effect-dependencies "Removing Effect Dependencies")
    * [ Reusing Logic with Custom Hooks  ](/learn/reusing-logic-with-custom-hooks "Reusing Logic with Custom Hooks")

Is this page useful?

[ Learn React ](/learn)

[ Adding Interactivity ](/learn/adding-interactivity)

#  State: A Component's Memory

Components often need to change what’s on the screen as a result of an
interaction. Typing into the form should update the input field, clicking
“next” on an image carousel should change which image is displayed, clicking
“buy” should put a product in the shopping cart. Components need to “remember”
things: the current input value, the current image, the shopping cart. In
React, this kind of component-specific memory is called _state_ .

###  You will learn

  * How to add a state variable with the [ ` useState ` ](/reference/react/useState) Hook 
  * What pair of values the ` useState ` Hook returns 
  * How to add more than one state variable 
  * Why state is called local 

##  When a regular variable isn’t enough

Here’s a component that renders a sculpture image. Clicking the “Next” button
should show the next sculpture by changing the ` index ` to ` 1 ` , then ` 2 `
, and so on. However, this **won’t work** (you can try it!):

App.js  data.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { sculptureList } from './data.js';
    
    export default function Gallery() {
      let index = 0;
    
      function handleClick() {
        index = index + 1;
      }
    
      let sculpture = sculptureList[index];
      return (
        <>
          <button onClick={handleClick}>
            Next
          </button>
          <h2>
            <i>{sculpture.name} </i> 
            by {sculpture.artist}
          </h2>
          <h3>  
            ({index + 1} of {sculptureList.length})
          </h3>
          <img 
            src={sculpture.url} 
            alt={sculpture.alt}
          />
          <p>
            {sculpture.description}
          </p>
        </>
      );
    }
    
    

Show more

The ` handleClick ` event handler is updating a local variable, ` index ` .
But two things prevent that change from being visible:

  1. **Local variables don’t persist between renders.** When React renders this component a second time, it renders it from scratch—it doesn’t consider any changes to the local variables. 
  2. **Changes to local variables won’t trigger renders.** React doesn’t realize it needs to render the component again with the new data. 

To update a component with new data, two things need to happen:

  1. **Retain** the data between renders. 
  2. **Trigger** React to render the component with new data (re-rendering). 

The [ ` useState ` ](/reference/react/useState) Hook provides those two
things:

  1. A **state variable** to retain the data between renders. 
  2. A **state setter function** to update the variable and trigger React to render the component again. 

##  Adding a state variable

To add a state variable, import ` useState ` from React at the top of the
file:

    
    
    import { useState } from 'react';

Then, replace this line:

    
    
    let index = 0;

with

    
    
    const [index, setIndex] = useState(0);

` index ` is a state variable and ` setIndex ` is the setter function.

> The ` [ ` and ` ] ` syntax here is called [ array destructuring
> ](https://javascript.info/destructuring-assignment) and it lets you read
> values from an array. The array returned by ` useState ` always has exactly
> two