DEV Community: Abdulrahman Ismail

useState hook

Abdulrahman Ismail — Sun, 04 Feb 2024 13:43:10 +0000

*useState * is a React Hook that lets you add a state variable to your component.

State: A Component's Memory

Components often need to change what’s on the screen as a result of an interaction. Typing into the form should update the input field, clicking “next” on an image carousel should change which image is displayed, clicking “buy” should put a product in the shopping cart. Components need to “remember” things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called state.

This is the form:

const [state, setState] = useState(initialState)

the useState hook return two values the initial value which we can use it and a in that case (state),which It can be a value of any type, but there is a special behavior for functions. This argument is ignored ** after the initial render(it mean it only render at the very first time). and setter function to modify the initial state
as you see we are using array **destructuring.

If you pass a function as initialState, it will be treated as an initializer function. It should be pure, should take no arguments, and should return a value of any type. React will call your initializer function when initializing the component, and store its return value as the initial state

this is an example:

import { useState } from 'react';

function createInitialTodos() {
  const initialTodos = [];
  for (let i = 0; i < 50; i++) {
    initialTodos.push({
      id: i,
      text: 'Item ' + (i + 1)
    });
  }
  return initialTodos;
}

export default function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos);
  const [text, setText] = useState('');

  return (
    <>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <button onClick={() => {
        setText('');
        setTodos([{
          id: todos.length,
          text: text
        }, ...todos]);
      }}>Add</button>
      <ul>
        {todos.map(item => (
          <li key={item.id}>
            {item.text}
          </li>
        ))}
      </ul>
    </>
  );
}

This example passes the initializer function, so the createInitialTodos function only runs during initialization. It does not run when component re-renders, such as when you type into the input.

about the setter function of a useState:
You can pass the next state directly, or a function that calculates it from the previous state.
like:

import { useState } from "react";
import "./App.css";

function App() {
  const [counter, setCounter] = useState(0);
  const handleIncremeant = () => {
    setCounter(counter + 1);
  };

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={handleIncremeant}>+1</button>
        <p>{counter}</p>
      </header>
    </div>
  );
}

export default App;

import { useState } from "react";
import "./App.css";

function App() {
  const [counter, setCounter] = useState(0);
  const handleIncremeant = () => {
    setCounter((prevCounter) => prevCounter + 1);
  };

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={handleIncremeant}>+1</button>
        <p>{counter}</p>
      </header>
    </div>
  );
}

export default App;

but what is the difference you may ask?🤔

well the different is If you pass a function as nextState, it will be treated as an updater function. It must be pure, should take the pending state as its only argument, and should return the next state. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying all of the queued updaters to the previous state. but what is that mean?

lets take you to the practical learning:
if we modify our code to this :

import { useState } from "react";
import "./App.css";

function App() {
  const [counter, setCounter] = useState(0);
  const handleIncremeant = () => {
**    setCounter(counter + 1);
    setCounter(counter + 1);
    setCounter(counter + 1);**
  };

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={handleIncremeant}>+1</button>
        <p>{counter}</p>
      </header>
    </div>
  );
}

export default App;

what is the output of the counter? 1 or 3? and why?

after one click, +1 will only be 1 rather than 3! This is because calling the set function does not update the counter state variable in the already running code. So each setCounter(counter + 1) call becomes setCounter(1).

To solve this problem, you may pass an updater function to setCounter instead of the next state:

  const handleIncremeant = () => {
    setCounter((prevCounter) => prevCounter + 1);
    setCounter((prevCounter) => prevCounter + 1);
    setCounter((prevCounter) => prevCounter + 1);
  };

in that modification:
prevCounter => prevCounter + 1 will receive 0 as the pending state and return 1 as the next state.
prevCounter => prevCounter + 1 will receive 1 as the pending state and return 2 as the next state.
prevCounter => prevCounter + 1 will receive 2 as the pending state and return 3 as the next state.

Call *useState * at the TOP level of your component

import { useState } from "react";
import "./App.css";

function App() {
//TOP LEVEL 
**  const [counter, setCounter] = useState(0);**

  return (
    <div className="App">
      <header className="App-header">
        <p>{counter}</p>
      </header>
    </div>
  );
}

export default App;

if you don't call your state veriable at the top level of your components it'll give you an error like:

import { useState } from "react";
import "./App.css";

function App() {
  const [counter, setCounter] = useState(0);
  if (counter) {
    counter.forEach((element) => {
      const [people, setPeople] = useState(counter);
    });
  }
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
      </header>
    </div>
  );
}

export default App;

in that case we get this error

 React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function

we can't use it inside of a condition or loop, if in any case you need that extract a new component and move the state into it.

Updating objects and arrays in state

In React, state is considered read-only, so you should replace it rather than mutate your existing objects. For example, if you have a form object in state, don’t mutate it

// 🚩 Don't mutate an object in state like this:
form.firstName = 'Taylor';

Instead, replace the whole object by creating a new one:

// ✅ Replace state with a new object
setForm({
  ...form,
  firstName: 'Taylor'
});

In this example, the form state variable holds an object. Each input has a change handler that calls setForm with the next state of the entire form. The { ...form } spread syntax ensures that the state object is replaced rather than mutated.

import { useState } from 'react';

export default function Form() {
  const [form, setForm] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com',
  });

  return (
    <>
      <label>
        First name:
        <input
          value={form.firstName}
          onChange={e => {
            setForm({
              ...form,
              firstName: e.target.value
            });
          }}
        />
      </label>
      <label>
        Last name:
        <input
          value={form.lastName}
          onChange={e => {
            setForm({
              ...form,
              lastName: e.target.value
            });
          }}
        />
      </label>
      <label>
        Email:
        <input
          value={form.email}
          onChange={e => {
            setForm({
              ...form,
              email: e.target.value
            });
          }}
        />
      </label>
      <p>
        {form.firstName}{' '}
        {form.lastName}{' '}
        ({form.email})
      </p>
    </>
  );
}

Resetting state with a key

You’ll often encounter the key attribute when rendering lists. However, it also serves another purpose.

You can reset a component’s state by passing a different key to a component. In this example, the Reset button changes the version state variable, which we pass as a key to the Form. When the key changes, React re-creates the Form component (and all of its children) from scratch, so its state gets reset.

Read preserving and resetting state to learn more.(this link is very important to learn where state live and how state works so definitely you need to check it out!)

import { useState } from 'react';

export default function App() {
  const [version, setVersion] = useState(0);

  function handleReset() {
    setVersion(version + 1);
  }

  return (
    <>
      <button onClick={handleReset}>Reset</button>
      <Form key={version} />
    </>
  );
}

function Form() {
  const [name, setName] = useState('Taylor');

  return (
    <>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <p>Hello, {name}.</p>
    </>
  );
}

And Finally there are some troubleshooting:

I’ve updated the state, but logging gives me the old value
Calling the set function does not change state in the running code:

function handleClick() {
  console.log(count);  // 0

  setCount(count + 1); // Request a re-render with 1
  console.log(count);  // Still 0!

  setTimeout(() => {
    console.log(count); // Also 0!
  }, 5000);
}

This is because states behaves like a snapshot. Updating state requests another render with the new state value, but does not affect the count JavaScript variable in your already-running event handler.

I’m getting an error: “Too many re-renders”

You might get an error that says: Too many re-renders. React limits the number of renders to prevent an infinite loop. Typically, this means that you’re unconditionally setting state during render, so your component enters a loop: render, set state (which causes a render), render, set state (which causes a render), and so on. Very often, this is caused by a mistake in specifying an event handler:

// 🚩 Wrong: calls the handler during render
return <button onClick={handleClick()}>Click me</button>

// ✅ Correct: passes down the event handler
return <button onClick={handleClick}>Click me</button>

// ✅ Correct: passes down an inline function
return <button onClick={(e) => handleClick(e)}>Click me</button>

I’m trying to set state to a function, but it gets called instead

You can’t put a function into state like this:

const [fn, setFn] = useState(someFunction);

function handleClick() {
  setFn(someOtherFunction);
}

Because you’re passing a function, React assumes that someFunction is an initializer function, and that someOtherFunction is an updater function, so it tries to call them and store the result. To actually store a function, you have to put () => before them in both cases. Then React will store the functions you pass.

const [fn, setFn] = useState(() => someFunction);

function handleClick() {
  setFn(() => someOtherFunction);
}

React Hooks

Abdulrahman Ismail — Fri, 02 Feb 2024 19:05:11 +0000

React hooks are introduced in React 16.8 React hooks have significantly improved the way developers write React components by promoting reusability, simplifying logic, and enhancing readability. While there might be a learning curve, the benefits often outweigh the drawbacks, making hooks a powerful tool for React development.

There are some benefits of them like, Hooks allow functional components to manage state, side effects, and other React features without the need for class components. This results in cleaner and more concise code. which mean we CAN'T use the hooks in side class components

import  { Component } from "react";

class ClassComponentWithHooks extends Component {
  const [count,setCount]=useState();
}

return (
  <div>
    <p>Count: {this.state.count}</p>
    <button onClick={this.handleIncrement}>Increment</button>
  </div>
);

export default ClassComponentWithHooks;

this will give us the error of

  × Unexpected token `[`. Expected * for generator, private key, identifier or async
   ╭─[D:\learning\REACT\practice-hooks\app\page.js:2:1]
 2 │ import  { Component } from "react";
 3 │
 4 │ class ClassComponentWithHooks extends Component {
 5 │   const [count,setCount]=useState();
   ·         ─
 6 │ }
 7 │
 8 │ return (
   ╰────

Caused by:
    Syntax Error

and backing to the class component this is an example of using useState hook

import React, { Component } from 'react';

class ClassComponentWithHooks extends Component {
  constructor(props) {
    super(props);

    // Initialize state using the useState hook equivalent in a class component
    this.state = {
      count: 0,
    };

    // Bind event handler method to the instance
    this.handleIncrement = this.handleIncrement.bind(this);
  }

  // Event handler method
  handleIncrement() {
    // Update state using the setState method
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleIncrement}>Increment</button>
      </div>
    );
  }
}

export default ClassComponentWithHooks;

Reusability:

Custom hooks allow you to extract and reuse stateful logic across different components. This promotes a more modular and reusable code structure.

Example:

import React, { useState } from 'react';

// Custom hook for handling form input
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
}

// Example component using the custom hook
function FormComponent() {
  const firstNameInput = useFormInput('');
  const lastNameInput = useFormInput('');

  return (
    <div>
      <label>
        First Name:
        <input type="text" {...firstNameInput} />
      </label>

      <br />

      <label>
        Last Name:
        <input type="text" {...lastNameInput} />
      </label>

      <p>
        Full Name: {firstNameInput.value} {lastNameInput.value}
      </p>
    </div>
  );
}

export default FormComponent;

Explanation:
In this example, the *useFormInput * custom hook encapsulates the logic for handling form input. It initializes a state for the input value using the useState hook and returns an object with the current value and an onChange handler.

The *FormComponent * then uses this custom hook for both the first name and last name inputs. This promotes reusability, as you can easily apply the same form input logic in other components without duplicating code.

Improved Readability:

Hooks encourage a more sequential and linear structure in functional components, making it easier to understand the flow of the component's logic.

And with all of those powerful stuff we have some disadvantages which is NOT actually Disadvantage 😂

we can call them Drawbacks of React Hooks

like Developers familiar with class components may need some time to adjust to the new syntax and paradigm introduced by hooks. and also Hooks are available starting from React version 16.8. If your project uses an older version, you need to upgrade to take advantage of hooks.

finally there are some most important hooks:

1-useState

2-useEffect

3-useContext

4-useReducer

5-useCallback and useMemo

6-useRef

And MUCH more we are going to talk about them one by one in the future

Conclusion

In conclusion, React hooks have brought a transformative shift to how developers approach building components in React. Introduced in version 16.8, these hooks offer a powerful way to manage state, side effects, and other React features within functional components. While there may be a slight learning curve for those accustomed to class components, the benefits of hooks—such as reusability, simplified logic, and enhanced readability—far outweigh any initial challenges.

The ability to create custom hooks further amplifies the modularity of React code, allowing developers to encapsulate and reuse stateful logic across different components. The example of a form input handler demonstrates how custom hooks can promote a more modular and maintainable code structure.

Despite the advantages, it's essential to acknowledge that React hooks are designed for use in functional components, and attempting to use them within class components will lead to errors. Additionally, developers should be mindful of project compatibility, ensuring they are using a version of React that supports hooks.

As we delve into specific hooks like useState, useEffect, useContext, useReducer, useCallback, useMemo, and useRef, the potential for creating efficient and expressive React applications becomes increasingly evident. These hooks empower developers to handle complex state management and side effects with ease.

In the ever-evolving landscape of React development, embracing hooks opens up new possibilities for creating more maintainable, readable, and modular code. As you continue your journey with React, exploring and mastering these hooks will undoubtedly contribute to your effectiveness as a React developer.

Thanks for reading this blog post hope you enjoy it and learn something new and I'm sorry for any mistake or shortcoming.