Как заставить react перерисовывать только один элемент при обновлении state?

Question

[Phoen1xx]

Всем привет. Подскажите пожалуйста, я создаю массив объектов в state, и генерирую при помощи map дочерние компоненты, и при изменении одного поля, ререндерится все заново. Есть какой-то способ это оптимизировать? Мне казалось что именно для этого указывается поле key, но оно не помогает.
Вот пример кода:

let myData = [
    { id: 1, data: 'Foo' },
    { id: 2, data: 'Bar' }
]

export default function Test(){
    let [items, setItem] = useState(myData);

    let setNewItemData = (itemId, data) => {
        let newItems = items.map(item => {
            if(item.id !== itemId){
                return item;
            }

            return { ...item, data }
        });

        setItem(newItems)
    }

    console.log('Render main Component');

    return (
        <>
            {
                items.map(item => {
                    return (
                        <MyItem key={item.id} item={item} setNewItemData={setNewItemData}></MyItem>
                    )
                })
            }
        </>
    )

}

export default function MyItem({ item, setNewItemData }) {
    console.log('Render MyItem');

    return (
        <button onClick={ () => { setNewItemData(item.id, 'New value') } }>{item.data}</button>
    )
}

Answer 1

[profesor08]

При каждом вызове setNewItemData у тебя получается новый массив items. Который ты пихаешь в setItem. При каждом вызове setItem, выполнится вся твоя функция, а значит и items.map, и заново отрендерится каждый из MyItem. Если хочешь что рисовался только MyItem, то модифицируй его внутренний стейт, а не стейт родителя.

const Item = ({ item }) => {
  const [item, setItem] = useState(itemProp);

  const updateItem = useCallback(() => {
    setItem((item) => ({
      ...item,
      count: item.count + 1
    }));
  }, []);

  return (
    <div onClick={updateItem}>
      {item.title} {item.count}
    </div>
  );
};

Comments

[Phoen1xx]

Смысл изменения стейта снаружи, в том, что я могу по нему выводить какие-то общие данные, по жэтому не могу его менять в каждом Item отдельно. Получается никого решения не существует, и это нормально поведение?
P.S. И как быть, если массив состоит из пары сотни item, это же их каждый раз все перерисовывать придется в цикле.

[Владимир]

Phoen1xx,
Ну если менять массив в верхнем компоненте. то нужно хотябы использовать useCallBack и функциональный вызов изменения стейта чтобы функция колбека не создавалась каждый раз заново.
Ну и справедливости ради вызов компонента еще не означает замену елемента в дом дереве.
https://codesandbox.io/s/vigorous-bogdan-76lwj?fil...

[WbICHA]

({ item }) => {
const [item,

)

[profesor08]

WbICHA, тссс

[profesor08]

Phoen1xx, надо проектировать иначе. По простому, то ты уже все сделал и получил нехороший результат по производительности. Попробуй для хранения массива использовать useRef. Для отдельных итемов использовать пример что я привел, со стейтом внутри и передай в него колбек. А при изменении итема, вызывать переданный колбек, который обновит конкретный итем в массиве. Таким образом родитель у тебя не перерисуется, так как ты напрямую будешь менять данные.

[Phoen1xx]

Владимир, а как узнать какой вызов меняет dom, в расширении браузера не увидел такой информации

[Phoen1xx]

profesor08, а как я useRef буду использовать для этого? Это де просто ссылка на dom элемент

[profesor08]

Phoen1xx, это не ссылка на dom элемент, это хук, который позволяет сохранить любые данные между рендерами, а при изменении этих данных не будет вызываться никаких рендеров.

[Владимир]

Справедливости ради profesor08 прав, я не знаю что за гипотетический "вывод общих данных" но если изменения влияют на елемент, лучше их делать в елементе.
По твоему описанию туда просится редакс или контекст в зависимости от размаха твоего проекта.

[profesor08]

Владимир, редакс или контекст не решают этих проблем)) Массив будет ререндериться весь.

[Alexandroppolus]

profesor08, в представленном варианте Item не обновится, если данные будут заменены "снаружи".
itemProp читается только один раз.

[profesor08]

Alexandroppolus, если они будут меняться снаружи, то достаточно добавить эффект, в котором перезаписать стейт на новый.

[Alexandroppolus]

profesor08, но ведь компонент Item по факту и сам будет всякий раз менять это внешнее значение? (как сказано в комментарии про useRef). Тогда внутренний useState ему без надобности.

[profesor08]

Alexandroppolus, если надо изменить только один итем без ререндера родительского компонента, то надо изменять локальный стейт итема. Чтоб поддерживать данные в родителе в актуальном состоянии, без ререндера, надо оповестить родителя об изменении, например через колбек. В родителе поменять данные, доступные через ссылку. Таким образом везде данные будут актуальные. Но, если надо изменить сам массив, например добавить итем, то надо будет любым образом вызвать ререндер родителя. Но, если изменится только итем, откуда-то извне, то несмотря на ререндет родителя, в целевом итеме не изменится стейт, стейт надо менять вручную, например отреагировав эффектом.

[Alexandroppolus]

profesor08, а если завтра добавится ещё какая-нибудь верстка внутри родителя (компонент Test в вопросе), завязанная на items? Или дочерний компонент, который эти items получает в проп и по ним что-то рисует? Тогда уже не получится при изменении данных из компонента Item просто молча перезаписать значение в массиве внутри рефа. Придется пропушивать каждую заинтересованную сторону; кого-то обязательно забудем.. С этим подходом мы теряем реактивность.
Если хочется экономить рендеры родителя, то лучше не изобретать всякие хитрые схемы, а просто использовать MobX.

Answer 2

[Alexandroppolus]

Использовать React.memo для MyItem

export default const MyItem = React.memo(({ item, setNewItemData }) => {
   ....
});

в компоненте Test функцию setNewItemData обернуть в useCallback, чтобы она была постоянной. Для этого внутри неё использовать setItems с передачей в него функции, чтобы setNewItemData не зависело от items

let [items, setItems] = useState(myData);

    const setNewItemData = useCallback((itemId, data) => {
        setItems((items) => {
            return items.map(item => {
                if (item.id !== itemId) {
                    return item;
                }
    
                return {...item, data}
            });
        });
    }, [setItems]);

Comments

[Alexandroppolus]

Ну и как всегда самый оптимальный вариант - юзать mobx, мутабельно менять item.data, избежав перерисовки не только всех других MyItem, но и даже Test

Answer 3

[vıtalıyırtlach]

При изменение родительского компонента он рендерит все дочерние елементы

Comments

[iordania]

если намочить руку то она будет мокрая