React hooks: useState()

useState is a fundamental hook in React, introduced with React 16.8, which allows you to add state to functional components. Prior to hooks, state management was only possible in class components, which made functional components less powerful and more limited in scope. The introduction of useState and other hooks changed that.

Readability

useState allows you to manage state in a more readable and straightforward way compared to class components. It makes the component's state and the function to update it clearly defined, leading to more maintainable and understandable code.

DIY (Don't repeat yourself)

Hooks enable better encapsulation of stateful logic, making it easier to reuse that logic across different components. This reusability can lead to more modular code and reduce redundancy in your codebase.

Easier to test and debug

Testing and debugging functional components with useState is generally simpler than dealing with class components. This is because functional components tend to have less boilerplate and fewer side effects, making the flow of data and state changes easier to track.

Consise State initialization

It's very straight forward to set a default value to a variable, update it clearly in functions.

For example a form

import React, { useState } from 'react';

function TextInput() {
const [inputValue, setInputValue] = useState('');

const handleChange = (event) => {
   setInputValue(event.target.value);
 };
 
  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>You typed: {inputValue}</p>
    </div>
  );
}

export default TextInput;