В чем разница между изменением Context и State в React

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

State же управляет внутренним состоянием компонента и триггерит ререндер при изменении. State локальный и не доступен другим компонентам без пропсов или поднятия состояния.

Пример Context:

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Пример State:

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Context — для глобальных данных, State — для локальных.