Function components have come a long way since React v0.14. Introduced as a 

 for defining stateless, presentational components, function components can now handle state via the 

 Hook. This means you can define any component, stateful or stateless, with functions, and you no longer have to deal with the extra, unnecessary code that comes with classes. In fact, if you choose to write all your components as function components, then the bundle size of your React application significantly decreases.

 Hook lets you manage state in function components, we must first revisit class components.

When you create a class component, all of the component's state is stored within a single object. Within a class constructor, this object gets assigned to the component's 

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isMessageShown: true
    };
  }

  render() {
    return (
      <div>
        { this.state.isMessageShown ? <p>The message is shown.</p> : null }
      </div>
    );
  }
}

export default App;

To update a single value (or multiple values) of the component's state, call the component's 

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isMessageShown: true
    };

    // Don't forget this line to bind the function to the component instance.
    // Instead of `this` being `undefined`, it should reference the component instance.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(_evt) {
    this.setState(prevState => ({
      isMessageShown: !prevState.isMessageShown
    }));
  }

  render() {
    return (
      <div>
        { this.state.isMessageShown ? <p>The message is shown.</p> : null }
        <button type="button" onClick={this.handleClick}>Toggle Message</button>
      </div>
    );
  }
}

export default App;

 Hook, you no longer have to define stateful components with the class syntax. Here's how you define the 

 class component as a function component:

import React, { useState } from "react";

const App = () => {
  const [ isMessageShown, setIsMessageShown ] = useState(true);

  const handleClick = (_evt) => {
    setIsMessageShown(prevIsMessageShown => !prevIsMessageShown);
  };

  return (
    <div>
      { isMessageShown ? <p>The message is shown.</p> : null }
      <button type="button" onClick={handleClick}>Toggle Message</button>
    </div>
  );
};

export default App;

Notice how much smaller the component's definition has become.

Anytime you write a class component, you end up repeating the same boilerplate code:

 Hook is a special function that lets you add state to function components. When called, this Hook returns a state variable and a function for updating the state variable's value. 

The state variable contains the current state. The 

 Hook accepts only one argument: the initial state.

const [ stateVariable, setStateVariable ] = useState(initialValueOfStateVariable);

 can be anything: a string, a number, an object, etc.

Conventionally, you unpack the state variable and update function from the array returned by the 

 Hook. Additionally, you name the update function after the state variable, but prefixed with the word 

, its corresponding update function should be named 

The update function behaves similarly to the 

However, there is a key difference between the two. While the 

 method shallowly merges the component's new state with its old (most recent) state, the update function completely replaces the old state with the new state.

For example, given an initial state of...

{
  isMessageShown: true,
  user: {
    name: "Hello World",
    location: {
      street: "123 Fake St.",
      city: "San Francisco",
      state: "California",
      country: "United States"
    }
  },
  count: 0
}

this.setState({
  isMessageShown: false
});

. The current state becomes a new object that contains the modified 

{
  isMessageShown: false,
  user: {
    name: "Hello World",
    location: {
      street: "123 Fake St.",
      city: "San Francisco",
      state: "California",
      country: "United States"
    }
  },
  count: 0
}

: For state with deeply nested objects, you may want to use the spread operator to preserve the nested values.

On the other hand, the update function completely wipes out 

setState({
  isMessageShown: false
});

// New State:
// {
//   isMessageShown: false
// }

 by Paige Niedringhaus, a Blues Wireless Staff Software Engineer and author of 

The newline Guide to Modernizing an Enterprise React App.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder"><code>useState</code>&nbsp;- A Primer</h1><p>Function components have come a long way since React v0.14. Introduced as a <a href="https://reactjs.org/blog/2015/10/07/react-v0.14.html#stateless-function-components" rel="noopener noreferrer nofollow">simpler syntax</a> for defining stateless, presentational components, function components can now handle state via the <code>useState</code> Hook. This means you can define any component, stateful or stateless, with functions, and you no longer have to deal with the extra, unnecessary code that comes with classes. In fact, if you choose to write all your components as function components, then the bundle size of your React application significantly decreases.</p><p>To understand how the <code>useState</code> Hook lets you manage state in function components, we must first revisit class components.</p><h2 class="heading-anchor-text" id="revisiting-class-components"><span>Revisiting Class Components</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#revisiting-class-components">#</a></h2><p>When you create a class component, all of the component's state is stored within a single object. Within a class constructor, this object gets assigned to the component's <code>state</code> instance property, like so:</p><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-IqpC1VcHsnLEMvFN-7rvm" id="cm-IqpC1VcHsnLEMvFN-7rvm">import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isMessageShown: true
    };
  }

  render() {
    return (
      &lt;div&gt;
        { this.state.isMessageShown ? &lt;p&gt;The message is shown.&lt;/p&gt; : null }
      &lt;/div&gt;
    );
  }
}

export default App;</textarea><p>To update a single value (or multiple values) of the component's state, call the component's <code>setState()</code> method:  </p><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-i5XvQTXiaQt-PhdE9lKBU" id="cm-i5XvQTXiaQt-PhdE9lKBU">import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isMessageShown: true
    };

    // Don't forget this line to bind the function to the component instance.
    // Instead of `this` being `undefined`, it should reference the component instance.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(_evt) {
    this.setState(prevState =&gt; ({
      isMessageShown: !prevState.isMessageShown
    }));
  }

  render() {
    return (
      &lt;div&gt;
        { this.state.isMessageShown ? &lt;p&gt;The message is shown.&lt;/p&gt; : null }
        &lt;button type="button" onClick={this.handleClick}&gt;Toggle Message&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}

export default App;</textarea><p>Try it out in a CodeSandbox demo <a href="https://codesandbox.io/embed/immutable-sea-9ht1k?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noopener noreferrer nofollow">here</a>.</p><h2 class="heading-anchor-text" id="defining-stateful-components-with-the-usestate-hook"><span>Defining Stateful Components with the <code>useState</code> Hook</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#defining-stateful-components-with-the-usestate-hook">#</a></h2><p>With the <code>useState</code> Hook, you no longer have to define stateful components with the class syntax. Here's how you define the <code>&lt;App /&gt;</code> class component as a function component:</p><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-h6Q2DBWJAzsVZCwRQVtox" id="cm-h6Q2DBWJAzsVZCwRQVtox">import React, { useState } from "react";

const App = () =&gt; {
  const [ isMessageShown, setIsMessageShown ] = useState(true);

  const handleClick = (_evt) =&gt; {
    setIsMessageShown(prevIsMessageShown =&gt; !prevIsMessageShown);
  };

  return (
    &lt;div&gt;
      { isMessageShown ? &lt;p&gt;The message is shown.&lt;/p&gt; : null }
      &lt;button type="button" onClick={handleClick}&gt;Toggle Message&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default App;</textarea><p>Try it out in a CodeSandbox demo <a href="https://codesandbox.io/embed/state-in-function-components-e4geq?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noopener noreferrer nofollow">here</a>.</p><p>Notice how much smaller the component's definition has become.</p><p>Anytime you write a class component, you end up repeating the same boilerplate code:</p><ul><li><p>Explicitly telling the class component to inherit from <code>React.Component</code> (<code>class ClassComponentName extends from React.Component</code>).</p></li><li><p>Calling the parent class constructor with <code>props</code> inside the class component's constructor (<code>super(props)</code>).</p></li><li><p>Binding the correct context to all class methods that reference the <code>this</code> keyword (<code>this.classMethodName = this.classMethodName.bind(this)</code>). You can avoid this by defining class methods with the experimental <a href="https://babeljs.io/docs/plugins/transform-class-properties/" rel="noopener noreferrer nofollow">public class fields syntax</a>, but that requires an extra polyfill to be installed.</p></li><li><p>Referencing <code>this.state</code> whenever you need a value from the class component's state.</p></li></ul><p>The <strong><code>useState</code></strong> Hook is a special function that lets you add state to function components. When called, this Hook returns a state variable and a function for updating the state variable's value. </p><p>The state variable contains the current state. The <code>useState</code> Hook accepts only one argument: the initial state.</p><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-3Lp6s4VNcsIEjMy2GXXKy" id="cm-3Lp6s4VNcsIEjMy2GXXKy">const [ stateVariable, setStateVariable ] = useState(initialValueOfStateVariable);</textarea><p><code>initialValueOfStateVariable</code> can be anything: a string, a number, an object, etc.</p><p>Conventionally, you unpack the state variable and update function from the array returned by the <code>useState</code> Hook. Additionally, you name the update function after the state variable, but prefixed with the word <code>set</code>. For a state variable named <code>isMessageShown</code>, its corresponding update function should be named <code>setIsMessageShown</code>. </p><p>The update function behaves similarly to the <code>setState</code> method:</p><ul><li><p>An update to the state causes a re-render of the component (and its child components).</p></li><li><p>Both accept the same argument (either a new value to update the state variable with, or a function that provides the most recent state as an argument and returns the new state). The <code>setState</code> method can accept an additional callback function that runs after the state changes have been applied and the component has been re-rendered.</p></li><li><p>Both run asynchronously. State updates are not guaranteed to be applied immediately.</p></li><li><p>Both immutably update the state.</p></li></ul><p>However, there is a key difference between the two. While the <code>setState</code> method shallowly merges the component's new state with its old (most recent) state, the update function completely replaces the old state with the new state.</p><p>For example, given an initial state of...</p><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-5GY2uXCNtWThVwpdz_3nH" id="cm-5GY2uXCNtWThVwpdz_3nH">{
  isMessageShown: true,
  user: {
    name: "Hello World",
    location: {
      street: "123 Fake St.",
      city: "San Francisco",
      state: "California",
      country: "United States"
    }
  },
  count: 0
}</textarea><p>Calling...</p><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-YXorpeB0veCqao07GMSHi" id="cm-YXorpeB0veCqao07GMSHi">this.setState({
  isMessageShown: false
});</textarea><p>Leaves <code>user</code> and <code>count</code> intact, but only changes the value of <code>isMessageShown</code>. The current state becomes a new object that contains the modified <code>isMessageShown</code> and the original <code>user</code> and <code>count</code>: </p><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-yc-4_xOM2OGKawdAsWOA0" id="cm-yc-4_xOM2OGKawdAsWOA0">{
  isMessageShown: false,
  user: {
    name: "Hello World",
    location: {
      street: "123 Fake St.",
      city: "San Francisco",
      state: "California",
      country: "United States"
    }
  },
  count: 0
}</textarea><p>Try it out in a CodeSandbox demo <a href="https://codesandbox.io/s/shallow-merging-state-in-class-components-1r46n" rel="noopener noreferrer nofollow">here</a>.</p><p><em>Note</em>: For state with deeply nested objects, you may want to use the spread operator to preserve the nested values.</p><p>On the other hand, the update function completely wipes out <code>user</code> and <code>count</code> and only keeps the modified <code>isMessageShown</code> in the new state: </p><textarea data-iscodemirror="true" class="d-none" data-mode="text/jsx" data-uniqueid="cm-V_R_8SsbOTjbZLLGjHB4_" id="cm-V_R_8SsbOTjbZLLGjHB4_">setState({
  isMessageShown: false
});

// New State:
// {
//   isMessageShown: false
// }</textarea><p>Try it out in a CodeSandbox demo <a href="https://codesandbox.io/s/replacing-state-in-function-components-27tw5" rel="noopener noreferrer nofollow">here</a>.</p><p>As a best practice, you should...</p><ul><li><p>Keep all <code>useState</code> Hook calls at the top of the component's function body.</p></li><li><p>Break up large component state into multiple state variables. Rather than keeping all component state in a single object, create a state variable for each piece of the state that will be updated.
For example, given a component state of...</p><p><code>{
</code></p><p><code>&nbsp; isMessageShown: false, </code></p><p><code>&nbsp; user: { </code></p><p><code>&nbsp; &nbsp; name: "Hello World", </code></p><p><code>&nbsp; &nbsp; location: { </code></p><p><code>&nbsp; &nbsp; &nbsp; street: "123 Fake St.",</code></p><p><code>&nbsp; &nbsp; &nbsp; city: "San Francisco",</code></p><p><code>&nbsp; &nbsp; &nbsp; state: "California",</code></p><p><code>&nbsp; &nbsp; &nbsp; country: "United States"</code></p><p><code>&nbsp; &nbsp; }</code></p><p><code>&nbsp; },</code></p><p><code>&nbsp; count: 0</code></p><p><code>}</code>
</p><p>Define three state variables (and their update functions), one for each of the object's top-level properties:</p><p><code>const [ isMessageShown, setIsMessageShown ] = useState(false);
</code></p><p><code>const [ user, setUser ] = useState({ </code></p><p><code>&nbsp; name: "Hello World",</code></p><p><code>&nbsp; location: { </code></p><p><code>&nbsp; &nbsp; street: "123 Fake St.", </code></p><p><code>&nbsp; &nbsp; city: "San Francisco", </code></p><p><code>&nbsp; &nbsp; state: "California", </code></p><p><code>&nbsp; &nbsp; country: "United States" </code></p><p><code>&nbsp; } </code></p><p><code>});
</code></p><p><code>const [ count, setCount ] = useState(0);</code></p></li><li><p>Refactor reusable stateful logic into a custom Hook that can be used across multiple components. Unlike state in class components, state in function components is not tightly coupled to a specific component.</p></li></ul><h2 class="heading-anchor-text" id="next-steps"><span>Next Steps</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#next-steps">#</a></h2><p>To learn more about the <code>useState</code> Hook, check out the <a href="https://www.youtube.com/watch?v=rg3aSmiZgX0" rel="noopener noreferrer nofollow">second tutorial</a> in the <a href="https://www.youtube.com/watch?v=hlhLujLmH78" rel="noopener noreferrer nofollow">six-part YouTube series on React Hooks</a> by Paige Niedringhaus, a Blues Wireless Staff Software Engineer and author of <em><a href="https://www.newline.co/courses/newline-guide-to-modernizing-an-enterprise-react-app" rel="noopener noreferrer nofollow">The newline Guide to Modernizing an Enterprise React App.</a></em></p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20220115230554822_tutorial.jpg" attachmentid="7f0500af-ab82-4c0b-9a6e-d37a294df203" contenteditable="false" data-width="600" data-height="337"><div></div></figure><p></p>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

useState - A Primer

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript