setShowMore] = useState(false);

Here is how an image gallery uses and updates state on click:

App.js  data.js

App.js

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

    
    
    import { useState } from 'react';
    import { sculptureList } from './data.js';
    
    export default function Gallery() {
      const [index, setIndex] = useState(0);
      const [showMore, setShowMore] = useState(false);
      const hasNext = index < sculptureList.length - 1;
    
      function handleNextClick() {
        if (hasNext) {
          setIndex(index + 1);
        } else {
          setIndex(0);
        }
      }
    
      function handleMoreClick() {
        setShowMore(!showMore);
      }
    
      let sculpture = sculptureList[index];
      return (
        <>
          <button onClick={handleNextClick}>
            Next
          </button>
          <h2>
            <i>{sculpture.name} </i>
            by {sculpture.artist}
          </h2>
          <h3>
            ({index + 1} of {sculptureList.length})
          </h3>
          <button onClick={handleMoreClick}>
            {showMore ? 'Hide' : 'Show'} details
          </button>
          {showMore && <p>{sculpture.description}</p>}
          <img
            src={sculpture.url}
            alt={sculpture.alt}
          />
        </>
      );
    }
    
    

Show more

##  Ready to learn this topic?

Read **[ State: A Component’s Memory ](/learn/state-a-components-memory) ** to
learn how to remember a value and update it on interaction.

[ Read More  ](/learn/state-a-components-memory)

* * *

##  Render and commit

Before your components are displayed on the screen, they must be rendered by
React. Understanding the steps in this process will help you think about how
your code executes and explain its behavior.

Imagine that your components are cooks in the kitchen, assembling tasty dishes
from ingredients. In this scenario, React is the waiter who puts in requests
from customers and brings them their orders. This process of requesting and
serving UI has three steps:

  1. **Triggering** a render (delivering the diner’s order to the kitchen) 
  2. **Rendering** the component (preparing the order in the kitchen) 
  3. **Committing** to the DOM (placing the order on the table) 

  1. ![React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen.](/images/docs/illustrations/i_render-and-commit1.png)

Trigger

  2. ![The Card Chef gives React a fresh Card component.](/images/docs/illustrations/i_render-and-commit2.png)

Render

  3. ![React delivers the Card to the user at their table.](/images/docs/illustrations/i_render-and-commit3.png)

Commit

Illustrated by  [ Rachel Lee Nabors ](http://rachelnabors.com/)

##  Ready to learn this topic?

Read **[ Render and Commit ](/learn/render-and-commit) ** to learn the
lifecycle of a UI update.

[ Read More  ](/learn/render-and-commit)

* * *

##  State as a snapshot

Unlike regular JavaScript variables, React state behaves more like a snapshot.
Setting it does not change the state variable you already have, but instead
triggers a re-render. This can be surprising at first!

    
    
    console.log(count);  // 0  
    
    
    setCount(count + 1); // Request a re-render with 1  
    
    
    console.log(count);  // Still 0!

This behavior help you avoid subtle bugs. Here is a little chat app. Try to
guess what happens if you press “Send” first and _then_ change the recipient
to Bob. Whose name will appear in the ` alert ` five seconds later?

App.js

App.js

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

    
    
    import { useState } from 'react';
    
    export default function Form() {
      const [to, setTo] = useState('Alice');
      const [message, setMessage] = useState('Hello');
    
      function handleSub