Большая ошибка с использованием беспокойства

Этот пост был первоначально опубликован на моем личном блог .

В ReactJS мы столкнулись с бесконечными петлями или бесполезным повторным рендерингом. Это что-то неизбежное, но мы можем быть более внимательными к этому иногда. Одной из причин, по которой нам этот вид проблем является использованием; Я собираюсь поговорить о одной из ошибок, которые мы можем сделать с ним и узнать, как знать об этом.

Ошибка 😮.

Проверь это:

const [state, setState] = React.useState(0);
React.useEffect(() => {
  console.log("re-rendering");
}, [{ ...someData }])

Теперь, если мы сделаем SetState Несколько раз мы увидим это в консоли:

re-rendering
re-rendering
re-rendering

Ждать; какие? Мы только что прошли Сомедата как список зависимостей; Почему это регистрирует это? Это даже не связано с государство . Да, это не связано, но уделять больше внимания списку зависимостей; Мы прошли встроенный объект, что означает, что он всегда отличается от его предыдущей версии; Мы создаем это каждый раз, когда мы вызываем перенастройку компонента. Проверь это:

{ ...someData } === { ...someData } // false
{} === {} // false
[] === [] // false
// all are inline and have different references

Useffect Каким-то образом кэшируйте список зависимостей и проверьте, равно ли это следующее значение. Вот почему встроенные не примитивные значения ( [] , {} , {... data} , …) всегда разные в глазах этого инструмента.

Символ () Здесь это исключение, это отличается каждый раз, когда мы его создаем, но это примитивное значение.

Например, проверьте это, я видел многих разработчиков, которые они проверяют часть массива, как это:

const [state, setState] = React.useState([1, 2, 3, 4, 5]);
React.useEffect(() => {
  console.log("re-rendering");
}, [state.slice(0, 2)]); 
/* 
    prevVal = state.slice(0, 2) // first render
        ***
    nextVal = state.slice(0, 2) // second render
        ***
    prevVal === nextVal // false
*/

Ожидаемое поведение проверяет 1-3 значения, но он не работает так, потому что ломтик Метод всегда будет возвращать новый массив (ссылка).

Я надеюсь, что вам понравилось эту статью. Не забудьте поделиться и отправлять реакцию на мою статью. Если бы вы хотели что-то сказать, скажите мне на Twitter Или упомяните меня где угодно, вы можете даже подписаться на мой рассылка И следуй за мной на Github Отказ 👋🏻.

Оригинал: “https://dev.to/aslemammad/big-useeffect-mistake-7jm”