Блог

Я обнаружил, что в официальном next.js пример, state и dispatch были помещены информационные отдельные поставщики контекста.

Какой смысл был в этом? Предотвращает ли эта практика ненужные повторные рендеринги?

 export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <CounterDispatchContext.Provider value={dispatch}>
      <CounterStateContext.Provider value={state}>
        {children}
      </CounterStateContext.Provider>
    </CounterDispatchContext.Provider>
  )
}

export const useCount = () => useContext(CounterStateContext)
export const useDispatchCount = () => useContext(CounterDispatchContext)
 

Вам не нужно помещать их в отдельные ContextProviders, если почти все ваши компоненты используют как состояние, так и отправку, просто убедитесь, что вы запоминаете аргумент, который вы передаете значению поставщика, когда вы передаете их как объект. Таким образом, ваши потребители будут повторно отображать только тогда, когда состояние действительно изменится. Также обратите внимание, что dispatch экземпляр фактически не изменяется, поэтому нет смысла создавать для него отдельный контекст

 export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, 0)
  const contextValue = useMemo(() => ({state, dispatch}), [state, dispatch])
  return (
    <CounterContext.Provider value={contextValue}>
        {children}
    </CounterContext.Provider>
  )
}
 

Редактировать:

Как указал @dciccale в комментариях, имеет смысл сохранять отправку и состояние в отдельных контекстах, если в вашем приложении довольно много компонентов, которые в основном используют только отправку, и, следовательно, они не будут повторно отображаться при изменении состояния.

Даже если мы запоминаем contextValue с помощью useMemo hook, contextValue он все равно будет переоцениваться каждый раз, когда мы обновляем state значение, в результате чего все компоненты, зависящие от контекста, будут повторно отображаться, даже некоторые из них зависят только от dispatch only .

Смотрите также: https://hswolff.com/blog/how-to-usecontext-with-usereducer/#performance-concerns

Оцените требования к вашему приложению и примите разумное решение.