Introduction to useState()

useState() is a built-in hook in React that allows a functional component to have state variables. It returns an array with two elements: the current state value and a function to update the state value.

Usage

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In the above example, count is the state variable and setCount is the function to update its value. The initial value of count is set to 0 using useState(0).

Advantages

1. useState() makes it possible to have stateful logic in functional components, which were previously stateless.
2. It simplifies code and eliminates the need for complex lifecycle methods required to manage state in class components.
3. It is easy to understand and use, even for beginners.

Tips

1. Do not call useState() inside loops, conditions or nested functions. It must be called at the top level of the functional component.
2. When updating the state based on the previous state, use the function form instead of the object form. For example, instead of setCount(count+1), use setCount(prevCount => prevCount+1). This ensures that the update is based on the latest state value.

useState() is an essential hook that every React developer should know. By using it, you can easily manage the state of your application and make it more interactive.