ggled when you click “Show details”:

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);
    
      function handleNextClick() {
        setIndex(index + 1);
      }
    
      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

It is a good idea to have multiple state variables if their state is
unrelated, like ` index ` and ` showMore ` in this example. But if you find
that you often change two state variables together, it might be easier to
combine them into one. For example, if you have a form with many fields, it’s
more convenient to have a single state variable that holds an object than
state variable per field. Read [ Choosing the State Structure
](/learn/choosing-the-state-structure) for more tips.

#####  Deep Dive

####  How does React know which state to return?

Show Details

You might have noticed that the ` useState ` call does not receive any
information about _which_ state variable it refers to. There is no
“identifier” that is passed to ` useState ` , so how does it know which of the
state variables to return? Does it rely on some magic like parsing your
functions? The answer is no.

Instead, to enable their concise syntax, Hooks **rely on a stable call order
on every render of the same component.** This works well in practice because
if you follow the rule above (“only call Hooks at the top level”), Hooks will
always be called in the same order. Additionally, a [ linter plugin
](https://www.npmjs.com/package/eslint-plugin-react-hooks) catches most
mistakes.

Internally, React holds an array of state pairs for every component. It also
maintains the current pair index, which is set to ` 0 ` before rendering. Each
time you call ` useState ` , React gives you the next state pair and
increments the index. You can read more about this mechanism in [ React Hooks:
Not Magic, Just Arrays. ](https://medium.com/@ryardley/react-hooks-not-magic-
just-arrays-cd4f1857236e)

This example **doesn’t use React** but it gives you an idea of how ` useState
` works internally:

index.js  index.html

index.js

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

    
    
    let componentHooks = [];
    let currentHookIndex = 0;
    
    // How useState works inside React (simplified).
    function useState(initialState) {
      let pair = componentHooks[currentHookIndex];
      if (pair) {
        // This is not the first render,
        // so the state pair already exists.
        // Return it and prepare for next Hook call.
        currentHookIndex++;
        return pair;
      }
    
      // This is the first time we're rendering,
      // so create a state pair and store it.
      pair = [initialState, setState];
    
      function setState(nextState) {
        // When the user requests a state change,
        // put the new value into the pair.
        pair[0] = nextState;
        updateDOM();
      }
    
      // Store the pair for future renders