Всем привет, подскажите если поймете, у меня в стейте есть

Question

Всем привет, подскажите если поймете, у меня в стейте есть

массив с числами типо array = [0, 0, 0, 0, 0, ... , 0]; я вывожу компоненты (кнопки) для каждого итема массива, по клику на кнопку я меняю соответствующее число в массиве, и уже от этого меняю цвет кнопки, если скажем кликнули на первую кнопку, то в стейте уже будет array = [1, 0, 0, 0, 0, ... , 0];
вопрос вот в чем, каждый раз при клике все кнопки заново рендерятся, и получается что если у меня в массиве 1000 кнопок, а мы кликнули только на 1, то они все заново перерисовались, можно ли сделать чтобы менялась только одна кнопка? (вопрос по оптимизации)

#frontend #javascript #programming #react.js #russian

0

12.05.2021

11 ответов

15 просмотров

Dimitri 👰🏼‍♀️🧝🏻‍♀️🤦🏼‍♀️

можешь через memo мемоизировать кнопки

0

12.05.2021

🐆 Автор вопроса

пробовал, тогда вообще ничего не меняется)

0

12.05.2021

Dmitry

если че то рендерится массив и данные сверху хуки не помогут в такой мемоизации

0

12.05.2021

🐆 Автор вопроса

хм, возможно у меня действительно что-то не так с пропсами, щас попробую поковырять, спасибо

0

12.05.2021

Elisey Martynov

не понял. Кода перед глазами нет. Я его кейс представляю так. Есть массив. Мы его мэппим в компоненты, в каждый компонент прокидываем ключ и значение. В этом компоненте внутри можно сравнивать - изменилось ли значение - и мемоизировать. Если еще будет уникальный ключ - то это вообще шик. И все будет работать. Что не так то?)

0

12.05.2021

Dmitry

ты чет совсем не понял как работает мемоизация и зачем хук на мемо

0

12.05.2021

Elisey Martynov

Я то как раз понял. Через него мы можем сделать функциональный аналог shouldComponentUpdate - что ему и нужно, для оптимизации. Но это естественно не главная задача того, что делает useMemo. Просто его так можно использовать

0

12.05.2021

Dmitry

useMemo ? ты не путаешь с memo ?

0

12.05.2021

Elisey Martynov

Путаю. Сори, ааххах.

0

12.05.2021

Elisey Martynov

https://codesandbox.io/s/hungry-framework-do1qe?file=/src/App.js вот накидал тебе простейшую песочницу

0

12.05.2021

Elisey Martynov · Accepted Answer

через useMemo. Короче делаешь функциональный аналог классового componentShouldUpdate (в доке есть). И привязываешь к пропу который будет предыдущий с пришедшим сравнивать, через который реакт понимает - надо ему заного рисовать этот компонент или нет

169 похожих чатов

Всем привет, подскажите если поймете, у меня в стейте есть

11 ответов

Похожие вопросы