What are the best practices for troubleshooting DOM mutations in React?

Некоторые рекомендации по работе с мутациями DOM в React, которые могут помочь в устранении проблем:

• Использовать состояние только для изменяющихся значений. 1 Для постоянных значений лучше определять их как свойства компонента (пропсы). 1
• Минимизировать обновления состояния. 1 Обновление состояния — дорогая операция, её следует минимизировать. 1 По возможности нужно группировать обновления состояния и использовать setState с функцией обратного вызова. 1
• Использовать структуры неизменяемых данных. 15 Вместо изменения объекта лучше создавать новый объект с обновлёнными значениями. 1 Для этого можно использовать библиотеки, например Immutable.js или seamless-immutable. 1
• Делать объекты небольшими. 1 Большие объекты могут приводить к медленной отрисовке и снижению производительности. 1
• Использовать ключ для рендеринга списка. 1 Это поможет React определить, какие элементы изменились, и снизит количество манипуляций с DOM. 1
• Не использовать индекс как ключ. 1 Использование индекса массива в качестве ключа при рендеринге списка может привести к неожиданному поведению. 1 Лучше использовать уникальный идентификатор для каждого элемента в списке. 1
• Использовать оператор распространения для копирования объектов. 1 Он более лаконичен и читаем, а также позволяет избежать неожиданных побочных эффектов. 1