Как оптимизировать компонент с большим количеством useState?

Когда React-компонент содержит множество вызовов useState, каждое обновление состояния вызывает ререндер всего компонента. Это может стать проблемой для производительности, особенно если некоторые состояния меняются часто, а другие — редко, или если рендер включает тяжелые вычисления.

Основные стратегии оптимизации

• Объединение состояний: Вместо множества отдельных useState для связанных данных используйте useReducer или один useState с объектом. Это позволяет обновлять несколько полей за одно действие, сокращая количество ререндеров.
• Мемоизация: Примените React.memo для компонента, чтобы предотвратить ререндер, если пропсы не изменились. Используйте useMemo для кэширования дорогих вычислений и useCallback для стабильных ссылок на функции, передаваемые в дочерние компоненты.
• Разделение компонентов: Разбейте большой компонент на более мелкие, каждый со своим состоянием. Это изолирует ререндеры: обновляется только тот подкомпонент, чье состояние изменилось.
• Ленивая инициализация: Для начальных состояний, требующих сложных вычислений, используйте ленивую инициализацию, передав функцию в useState.

Пример использования useReducer

Вместо множества useState объедините логику в редюсер:

const initialState = { count: 0, text: '', flag: false };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'updateText':
      return { ...state, text: action.payload };
    case 'toggleFlag':
      return { ...state, flag: !state.flag };
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);
  // Теперь одно обновление состояния вместо трёх отдельных
  return (
    <>
       dispatch({ type: 'increment' })}>
        Count: {state.count}
      
       dispatch({ type: 'updateText', payload: e.target.value })}
      />
    
  );
}

Пример мемоизации с React.memo и useCallback

const ExpensiveChild = React.memo(({ value, onChange }) => {
  console.log('Child rendered');
  return ;
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
  
  // useCallback сохраняет ссылку на функцию между рендерами
  const handleTextChange = useCallback((e) => setText(e.target.value), []);
  
  return (
    
       setCount(c => c + 1)}>Increment: {count}
      
    
  );
}

В этом примере ExpensiveChild не будет перерисовываться при обновлении count, потому что его пропсы text и handleTextChange остаются неизменными (благодаря useCallback).

Где это применяется

Такие оптимизации критичны в сложных интерфейсах: дашборды, формы с множеством полей, интерактивные таблицы или графики. Они помогают поддерживать плавность интерфейса при частых обновлениях состояния.

Вывод: Оптимизацию множества useState стоит применять, когда компонент начинает "тормозить" из-за частых ререндеров. Начните с объединения состояний через useReducer и разделения компонентов, затем добавьте мемоизацию для точечного контроля над рендерингом.