Использование Context API с useState в React. js, есть ли недостатки?

Question

Я создаю контекст и провайдера, как показано ниже. Как вы можете видеть, я использую useState () в своем провайдере (для состояния) вместе с функциями (все они передаются в объекте как значение prop, что позволяет легко деструктурировать все, что мне нужно в дочерних компонентах).

import React, { useState, createContext } from "react";

const CountContext = createContext(null);

export const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  const decrementCount = () => {
    setCount(count - 1);
  };

  return (
    <CountContext.Provider value={{ count, incrementCount, decrementCount }}>
      {children}
    </CountContext.Provider>
  );
};

export default CountContext;

Я обертываю свое приложение в таком провайдере (ах) в более высоком месте, например, в index. js. И использовать состояние с помощью useContext (), как показано ниже.

import React, { useContext } from "react";
import CountContext from "../contexts/CountContext";
import Incrementer from "./Incrementer";
import Decrementer from "./Decrementer";

const Counter = () => {
  const { count } = useContext(CountContext);

  return (
    <div className="counter">
      <div className="count">{count}</div>
      <div className="controls">
        <Decrementer />
        <Incrementer />
      </div>
    </div>
  );
};

export default Counter;

Все работает просто отлично, и я считаю, что проще поддерживать вещи таким образом по сравнению с некоторыми другими методами (общего) управления состоянием .

CodeSandbox: https://codesandbox.io/s/react-usecontext-simplified-consumption-hhfz6

Мне интересно, есть ли здесь ошибка или недостаток, которые я еще не заметил?

Answer 1

Одним из ключевых отличий с другими инструментами управления состоянием, такими как Redux, является производительность .

Любой дочерний элемент, использующий контекст, должен быть вложен в компонент ContextProvider. Каждый раз, когда состояние ContextProvider изменяется, оно будет отображаться, и все его (незаписанные) дочерние элементы будут отображаться тоже.

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