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.

AUTHOR

Ken Chan

Function components have come a long way since React v0.14. Introduced as a simpler syntax for defining stateless, presentational components, function components can now handle state via the useState Hook. This means you can define any component, stateful or stateless, with functions, and you no…

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

useState - A Primer

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript