Search⌘ K
AI Features
Home
Courses
Building Full Stack Applications Using Meteor.js

React Hook: useState

Explore how to use the React useState hook to add and manage local state in functional components. Learn to initialize state with simple values or objects, handle input changes, and trigger re-renders reflecting updated state in the UI.

We'll cover the following...

React hooks

Prior to React 16.8, the only way to access state in a React component was by composing with JavaScript’s class component. Functional components weren’t optimal since they were only used as presentational components. React 16.8 changed all that and introduced the concept of hooks, in which a functional component can hook into the React state and the lifecycle methods.

Note: Hooks only work in functional components. They don’t work in class-based components.

The useState hook

The useState hook adds a local state to a React component. See the code below:

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);
React useState hooks

We import useState from React on line 1. On line 5, we initialize the useState function with a default value of an empty string. The state’s variable text holds the current value of the state in the component, while setText is a function that’s used to change the value of the text state variable.

A click event handler is attached to the button, and the clickMe function is passed to it (line 14). This function calls the setText function that’s used to change the text state from an empty string to the word, Item. The component rerenders when the text variable changes and the word Item is shown on the screen.

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);
Changing React state using useState hook

The widget captioned “Changing React state using useState hook” above shows how to handle a component state using an object. On line 5 we set the person state which is an object and we default the initialState to an object with the three properties below:

  {name: "", occupation: "", age: ""};

The setPerson function changes the value of the person state. The component contains three input textboxes that are used to enter the person’s values for name, age, and occupation.

Looking closely at the input textbox should reveal a name property. This name property is useful to ascertain which textbox input is currently being changed. The same event handler, changeDetails, is attached to the three of them.

The changeDetails function is defined on lines 7–19. The function extracts the value being typed into the textbox using the line const value = e.target.value;. The e represents the event. The value of the name property of the input textbox is extracted on line 9.

The function checks for the value in the name variable. If the value is occupation, that means the occupation input textbox is being edited. The setPerson function is used to update the person state. We copy the previous person state using the destructured operator we learned in our objects lesson. If, for example, we’re dealing with the occupation key or property, we replace the occupation value with the current value from the occupation input textbox (see line 14).

Because the person object is changed, the App component is rerendered. Click the “Run” button, and type a person’s details into the textbox. Notice that the person state updates and the value typed is rendered on the screen.