DEV Community: Shaban-Eissa

Don't Update State Directly In React

Shaban-Eissa — Wed, 05 Oct 2022 11:15:54 +0000

In this post, we will discuss how to update state in correct way

first, App.js that contain list of todos and pass them as props to Todos component, after this we receive props in Todos component and passing them as props to Todo component to render every todo in list of todos, in Todos.js there is handleToggleComplete to make checkbox marked or not and contain handleSelect to detect which todo is selected

App.js code :

import Todos from "./Todos";

export default function App() {

  const initialTodos = [
    {
      id : 1 ,
      complete : false ,
      name : 'first todo'
    } , 
    {
      id : 2 ,
      complete : true ,
      name : 'second todo'
    } ,
    {
      id : 3 ,
      complete : false ,
      name : 'third todo'
    }
  ]
  return (
    <div className="App">
     <Todos initialTodos = {initialTodos} />  
    </div>
  );
}

Todos.js code :

import React, { useState } from "react";
import Todo from "./Todo";

const Todos = ({ initialTodos }) => {
  const [todos, setTodos] = useState(initialTodos);
  const [selectedTodo, setSelectedTodo] = useState();

  const handleToggleComplete = (todoId) => {
    setTodos((currTodos) => {
      const todo = currTodos.find((todo) => todo.id === todoId);
      todo.complete = !todo.complete;
      return currTodos;
    });
  };

  const handleSelect = (todoId) => {
    setSelectedTodo(todos.find((todo) => todo.id === todoId));
  };

  return (
    <>
      {todos.map((todo) => (
        <Todo
          key={todo.id}
          todo={todo}
          handleToggleComplete={handleToggleComplete}
          handleSelect={handleSelect}
        />
      ))}
      <h3>Selected Todo</h3>

      {selectedTodo && (
        <Todo
          todo={selectedTodo}
          handleToggleComplete={handleToggleComplete}
          handleSelect={handleSelect}
        />
      )}
    </>
  );
};

export default Todos;

Todo.js code :

import React from "react";

const Todo = ({ todo, handleToggleComplete, handleSelect }) => {
  const toggleComplete = () => {
    handleToggleComplete(todo.id);
  };

  const onSelect = () => {
    handleSelect(todo.id);
  };
  return (
    <div>
      <input
        type="checkbox"
        checked={todo.complete}
        onChange={toggleComplete}
      />
      {todo.name}
      <button onClick={onSelect}>Select</button>
    </div>
  );
};

export default Todo;

now let's see the result of this code

as we see we can't update any checkbox, this because we update state directly, in setTodos we update currTodos directly and return currTodos

 const handleToggleComplete = (todoId) => {
    setTodos((currTodos) => {
      const todo = currTodos.find((todo) => todo.id === todoId);
      todo.complete = !todo.complete;
      return currTodos;
    });
  };

to solve this problem we can update state by take copy of currTodos and update through copied state

const handleToggleComplete = (todoId) => {
    setTodos((currTodos) => {
      const copy = [...currTodos]
      return copy.map(todo => {
        if(todo.id === todoId) {
          return {...todo  , complete : !todo.complete}
        }
        return todo 
      })
    });
  };

to make more clarification about how to update state in code above,
1- copy is array we make update through it
2- if there is update return {...todo , complete : !todo.complete} this will be updated in copy array
3- if there is no update return todo
4- all this array (copy array) will be returned as new state as we say setTodos(copy)

 return copy.map(todo => {
        if(todo.id === todoId) {
          return {...todo  , complete : !todo.complete}
        }
        return todo 
      })

let's see the result now :

now we can update state of each checkbox successfully, but let's see what about the selectedTodo :

as we see, we selected third todo, but when mark or unmark checkbox from third todo it didn't update on selectedTodo that is becuase we stored the derived state of selectedTodo

in this code below the wrong is we store derived state, so keep in mind don't store derived state
setSelectedTodo(todos.find((todo) => todo.id === todoId))

the correct way is using this line of code below so every re-render we calculate updated selectedTodo and we can using useMemo for this
const selectedTodo = todos.find(todo => todo.id === selectedTodoId)

and that is the code below in Todos.js with all changes

import React, { useState } from "react";
import Todo from "./Todo";

const Todos = ({ initialTodos }) => {
  const [todos, setTodos] = useState(initialTodos);
  const [selectedTodoId, setSelectedTodoId] = useState();

  const selectedTodo = todos.find(todo => todo.id === selectedTodoId)

  const handleToggleComplete = (todoId) => {
    setTodos((currTodos) => {
      const copy = [...currTodos]
      return copy.map(todo => {
        if(todo.id === todoId) {
          return {...todo  , complete : !todo.complete}
        }
        return todo 
      })
    });
  };

  return (
    <>
      {todos.map((todo) => (
        <Todo
          key={todo.id}
          todo={todo}
          handleToggleComplete={handleToggleComplete}
          handleSelect={setSelectedTodoId}
        />
      ))}
      <h3>Selected Todo</h3>

      {selectedTodo && (
        <Todo
          todo={selectedTodo}
          handleToggleComplete={handleToggleComplete}
          handleSelect={setSelectedTodoId}
        />
      )}
    </>
  );
};

export default Todos;

let's see the result now of this code :

That is all about how to update state in correct way, keep in mind always not update state directly, take copy of state and update through the copied state

Thanks for your time to read this post

React UseEffect Best Practice

Shaban-Eissa — Sun, 02 Oct 2022 14:39:06 +0000

In this post we will see different cases of useEffect

first, let's see useEffect without any dependency

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState("");
  const [dark, setDark] = useState(false);

  const age = 23
  const user = { name, age };

  const buttonStyle = {
    backgroundColor: dark && "#000",
    color: dark && "#FFF"
  };

  const handleName = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    setDark((currDark) => !currDark);
  };

  useEffect(() => {
    console.log(user);
  });

  return (
    <div className="App">
      <input value={name} onChange={handleName} />
      <button style={buttonStyle} onClick={handleClick}>
        Toggle Theme
      </button>
    </div>
  );
}

in this code, any change in any state will cause re-render and then useEffect run again and again, so let's see the result in console when code run

second, let's see useEffect with dependency array

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState("");
  const [dark, setDark] = useState(false);

  const age = 23
  const user = { name, age };

  const buttonStyle = {
    backgroundColor: dark && "#000",
    color: dark && "#FFF"
  };

  const handleName = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    setDark((currDark) => !currDark);
  };

  useEffect(() => {
    console.log(user);
  } , [user]);

  return (
    <div className="App">
      <input value={name} onChange={handleName} />
      <button style={buttonStyle} onClick={handleClick}>
        Toggle Theme
      </button>
    </div>
  );
}

in this code useEffect will run when any change occur in user, now we can see that user is object and every re-render user object will have different reference, i mean we don't have the same reference for user object everytime so when we click on button we can see that the effect run !!!!!!!!!
we make effect depend on user object only, but why effect happen when we click on button, the normal is effect happen only when the user object value change, and so the answer for why when click on button effect runs is that because different reference of object.

let's see the result of this code :

and to solve this problem we can replace dependency array of useEffect by [name , age], then now we avoided different reference of user object

so let's see the result now

that is what we need now

an alternative solution to that with same result, we can keep user object in dependency and using useMemo() on user object like this code

import { useEffect, useMemo, useState } from "react";
import "./styles.css";

export default function App() {
  const age = 23;
  const [name, setName] = useState("");
  const [dark, setDark] = useState(false);

  const user = useMemo(() => {
    return { name, age };
  }, [name, age]);

  const buttonStyle = {
    backgroundColor: dark && "#000",
    color: dark && "#FFF"
  };

  const handleName = (e) => {
    setName(e.target.value);
  };

  const handleClick = () => {
    setDark((currDark) => !currDark);
  };

  useEffect(() => {
    console.log(user);
  }, [user]);

  return (
    <div className="App">
      <input value={name} onChange={handleName} />
      <button style={buttonStyle} onClick={handleClick}>
        Toggle Theme
      </button>
    </div>
  );
}

with useMemo() the user object reference will change only if any change occurred in name or age, then useEffect will run only if any change occurred in name or age.

Console current value of state in react js

Shaban-Eissa — Sun, 02 Oct 2022 12:31:51 +0000

we have a button and counter, we need once we clicked on button to console the current value of counter not the previous value

This code will display the previous value of counter because the state is asynchronous so console.log(counter) will run first before state changed, and that is why we see the previous value of counter when write console.log(counter) in increment function

That is result of above code

we can solve this by using useEffect and write console.log() in useEffect like this code :

and now if we clicked on button mean that we changed the state of counter and then useEffect will run becuase it depend on counter state, so we can see the current value of counter in the console

Updating state in react based on the previous state

Shaban-Eissa — Sat, 01 Oct 2022 16:53:50 +0000

Suppose the age is 42, let's see the difference between first and second function

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

in second function, you may pass an updater function to setAge and Here, age => age + 1 is your updater function. It takes the pending state and calculates the next state from it.
React puts your updater functions in a queue. Then, during the next render, it will call them in the same order:
age => age + 1 will receive 42 as the pending state and return 43 as the next state.
age => age + 1 will receive 43 as the pending state and return 44 as the next state.
age => age + 1 will receive 44 as the pending state and return 45 as the next state. There are no other queued updates, so React will store 45 as the current state in the end.

useState Best Practice

Shaban-Eissa — Fri, 30 Sep 2022 13:04:40 +0000

let's see in this post how we can apply best practice for useState()

suppose we have many inputs and we need to make state for each input, normal way to make this will be like :

This is avoidable because it will consume more time and the code will be un-readable; so the another way and best practice to make is to create state as object and every key is the name of each input such as
const [inputs,setInput] = useState({ name : "" , email : "" , password : ""})

<input name="name" /> <input name="email" /> <input name="password" />

and there is full code with only one function called handleChange that can handle all inputs

React Re-render Best Practice

Shaban-Eissa — Thu, 29 Sep 2022 15:11:17 +0000

In this post i will discuss how if we split the components can affect the performance of our react app.

first, the code will be two components :

This is first component

This is second component that we imported it in the component above

Let's check console :

now we see every time we click on the button, the state changed and then re-render the component then <Child /> will be rendered every time we click on button !!!!!!!!, we don't need that to happen because the <Child /> don't have any code that is relevant to main component, in other words don't have any relation to the color state, so we don't need to re-render it again because we clicked on the button

Solution of This problem :

first we need to make new file contain these two components like this below

and these two components now :

now let's see the console :

we can see that we can click the button and there is no more un-necessary render and that is the required.

That is my first post in dev.to and in the future i want to share more and more about react in this website, so leave your feedback about the post to make the next posts more organized, more useful.