Użycie hooka useState, ale nie zmieniając wartości

0

Zakładając, że mam w komponencie coś takiego:

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

Potem robie coś takiego:

 setCount(0)

To czy mimo tego, że wartością dla count nadal będzie 0 to komponent ponownie się przerenderuje?

1

Przy wartościach prymitywnych number/boolean/string nie będzie dodatkowego przeładowania.

Sytuacja się zmienia, gdy używamy obiektu lub tablicy.
Wtedy nawet przy takiej samej wartości react będzie odświeżał widok za każdym razem.

import React, { useState, useEffect } from 'react';

export default function App() {
  const [value, setValue] = useState({});

  useEffect(() => {
    console.log('render'); // console.log wykona się przy każdej zmianie wartości
  }, [value])

  const handleClick = () => {
    setValue({});
  };

  return (
    <div onClick={handleClick}>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}
2

Jeżeli zaktualizujesz wartość state, to React użyje funkcji Object.is aby porównać poprzednią wartość z nową. Jeżeli Object.is zwróci false, to strona się przerenderuje. Tak jak wspominał @Xarviel dla typów prymitywnych Object.is zwróci true czyli rozpozna, że wartości są identyczne. W przypadku list i obiektów sprawa jest bardziej skomplikowana. Jeżeli ustawisz ten sam obiekt, to strona się nie przerenderuje, ale jeżeli dasz inny obiektu z taką samą zawartością, to już Object.is nie rozpozna, że zawartość jest taka sama i strona się przerenderuje.

1 użytkowników online, w tym zalogowanych: 0, gości: 1