Yes, useState can store strings, numbers, booleans, objects, and arrays. When working with objects or arrays, use spread operators to update the state without mutation.
Key takeaways:
The useState Hook allows functional components to manage the local state efficiently, eliminating the need for class components and making code simpler, more readable, and modular.
React automatically rerenders components when their state changes, but the rerender is optimized to update only the affected parts of the DOM.
You can store strings, numbers, booleans, arrays, or objects in the state using useState. Unlike the merging behavior in class components, each state update fully replaces the previous value.
Functional components can call useState multiple times to manage independent pieces of state, improving component organization and maintainability.
React Hooks, such as the useState Hook, are functions that let you manage state and life cycle events directly in functional components. Before Hooks, you needed to use class components to handle state and component life cycle methods like componentDidMount or componentDidUpdate.
Hooks allow developers to handle both state and side effects in functional components, making the code cleaner and easier to maintain. Hooks were introduced in React 16.8.
You should call Hooks only at the top level of the component, meaning they should not be called inside loops, conditions, or nested functions.
You should call hooks only in React functional components or within custom Hooks. Hooks won’t work in class components or regular JavaScript functions outside the React environment.
useState HookThe useState ook is one of the most commonly used hooks. It allows components to manage the state easily. It accepts an initial value and returns an array containing the current state value and a function to update it. Every time you call the state update function, React triggers a rerender to reflect the new state in the UI. The syntax to define it is as follows:
const [state, setState] = useState(initialValue);
In the syntax above, we have the following:
state: The current value of the state.
setState: The function that is used to update the state.
initialValue: The initial value of the state when the component first renders.
Let’s look at an example of using the useState Hook to manage the state of a text input.
Line 1: We import the useState hook from React.
Line 4: We initialize the state with an empty string using useState('').
Line 12: We bind the value state to the input field.
Line 13: The onChange event updates the state every time the input value changes. It calls the setValue function that updates the value state with the text typed in the input field.
Explore the
useStateHook by implementing it in a real world use case in this project, “Build a Task Manager Using React.”
useStateUnlike class components, where the state is managed within a single object, functional components can call useState multiple times to manage multiple variables.
Let’s consider another example below where we define multiple state variables:
Line 4: We initialize the fName state with an empty string. It will store the current value of the first name input field.
Line 5: We initialize the lName state to store the last name value.
Line 6: We initialize the age state with an empty string to store the user’s age.
Line 7: We initialize the submittedData state that will store the submitted data in the form of an object.
Lines 9–23: We define the handleSubmit function that will store the current input values—fName, lName, and age—into the submittedData state. This ensures that the form data is captured and displayed after submission. It also resets the input fields by clearing their state and preparing the form for new entries.
Lines 29–37: We bind the input field for the first name to the fName state. Whenever a user enters anything in the input field, we update the fName state using the setFName function.
Lines 41–49: We bind the input field for the last name to the lName state. Whenever a user enters anything in the input field, we update the lName state using the setLName function.
Lines 53–61: We bind the input field for the age to the age state. Whenever a user enters anything in the input field, we update the age state using the setAge function.
Practice using multiple states in a component with this project, “Build an Image Sharing App with MERN Stack.”
useStateYou can store booleans, arrays, and objects in the state, just like primitive data types. Let’s look at a working example for each of these.
useStateIn this example, we demonstrate how to toggle the visibility of a component using a boolean state. The isVisible state stores a true/false value representing whether the text is visible. The toggleVisibility function negates the previous state, switching between true and false. The text in the <p> tag is only rendered when isVisible is true.
useStateIn this example, we demonstrate how to add and display items dynamically using an array state. The tasksList state stores an array of task strings. The setTasksList uses the spread operator to retain the previous tasks and add the new ones. The tasks are rendered using .map() to generate list items dynamically.
useStateThe profile state stores multiple fields—firstName, lastName, and email. We then define the handleChange function that uses the spread operator to preserve the previous state while updating only the targeted field. Finally, the handleSubmit function prevents the page reload and logs the complete profile object.
useState hookExplore these projects for hands-on practice on the useState Hook to gain a deeper understanding of managing state within functional components.
Haven’t found what you were looking for? Contact Us
Free Resources