behind the hood with the useState hook

Using the useState Hook, you can include state variables in functional components. This function takes an initial state parameter and returns a variable with the value of the current state (which need not be the starting state) and another function to update this value.

Class components, which are ES6 classes that extend from React, and functional components are the two different sorts of components available in React. Class components is a Component and may contain lifecycle methods and states: React extends the class Message. 

A unique function called the useState hook accepts the starting state as an argument and returns an array with two elements. UseState only encapsulates a single state value; calls to useState are required for numerous states.

Class and functional components in React:

ClassComponent:Class components are ES6 classes that extend from React.Component and can have state and lifecycle methods:

Example:

class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ‘’    
    };
  }

  componentDidMount() {
    /* ... */
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

FunctionalComponent:Functional components are functions that only take parameters for the component’s properties and return legitimate JSX:

Example:

function Message(props) {
  return <div>{props.message}</div>
}
const Message = (props) =>  <div>{props.message}</div>

The first time I read about hooks in React, I felt worried. Their mechanisms appeared to be too mystical. I recall attempting to understand how something basic operated on the inside by looking at it:

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
        The count is: {count}
        <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

What the example was doing was obvious. When you press the + button, the count is raised. However, even though 0 was always passed, Even as I began adding hooks to my apps, I didn’t have many definitive answers. 

So I started looking for publications that explained the inner workings of hooks. In the end, I made the decision to try reimplementing several of the key hooks myself.

This article describes the steps I took to reimplement the useState hook. For me, the objective was never to replicate the original implementation perfectly. The objective was to learn more about the implementation of concepts like useState.

What is the purpose of the React.useState Hook?

As previously mentioned, useState enables you to include state in function component declarations. requesting React. A function component’s useState method creates a single piece of state specific to that component.

In contrast to classes, where the state is always an object, hooks allow the state to be any type. A single value, which could be an object, an array, a boolean, or any other type you can think of, is stored in each individual piece of state.

So when is the useState Hook appropriate? Although larger projects would need additional state management solutions, it is particularly helpful for local component state.

different state variables: 

The next stage is to make MyReact capable of handling numerous variables. The single state variable is first replaced with an array of state variables. 

Now we would need a means to determine which state variable needs to be changed each time setState was called. By relying on the call order to useState, we may accomplish this. Consider the two calls that come after, as an illustration:

const MyCounter = () => {
  const [count, setCount] = MyReact.useState(0);
  const [name, setName] = MyReact.useState("");
}

Hooks for react: Update state

UseState returns a function as the second element that updates the state variable with a new value.

Here is an illustration of how to update the state variable whenever something changes using a text box:

const Message = () => {
  const [message, setMessage] = useState( '' );

  return (
    <div>
      <input
         type="text"
         value={message}
         placeholder="Enter a message"
         onChange={e => setMessage(e.target.value)}
       />
      <p>
        <strong>{message}</strong>
      </p>
    </div>
  );
};

Conclusion:

State variables can be used in functional components thanks to the useState Hook (function). This function takes an initial state parameter and returns a variable with the value of the current state (which need not be the starting state) and another function to update this value.