Context API na prática

Gerenciar os dados da sua aplicação usando a API React Context é simples de implementar, deixa eu seu código mais fluído e te ajuda a gerenciar estados em vários componentes sem que seja necessário fazer o tal do "Prop Drilling" que consiste em passar props de um componente ao outro até chegar no que você realmente deseja.
Em outras palavras, o Context Api nos permite compartilhar dados entre nossos componentes de uma maneira mais aninhada e eficaz do que usando props.

Prop drilling:

Em uma aplicação no mundo real de reactJS, você precisará usar um único estado em diferentes componentes E em diferentes níveis de hierarquia, você tem 3 modos de realizar esses compartilhamentos, por meio de Props, Biblioteca (entende-se por Redux/Mobx), e o tal do Context Api, o qual destaco por tamanha facilidade e entrega rápida sem burocracia.
Saibamos de que provider e o consumer são irmãos inseparáveis, dito isso, vamos lá:

Existem 4 etapas para que você consiga usar o Context API.

1- Criando o contexto:

export const TodoContext = createContext({} as TasksContextType);

2-Encapsulando o componente pai com o contexto criado usando o provider *Repare no TodoProvider, é o componente o qual vou utilizar para encapsular os componentes onde quero ter acesso ao estado 'tasks, setTasks:

export const TodoProvider = ({ children }: { children: ReactNode }) => {
  const [tasks, setTasks] = useState<ITask[]>([]);

  return (
    <TodoContext.Provider value={{ tasks, setTasks }}>
      {children}
    </TodoContext.Provider>
  )
}

function App() {  
  return (
    <>
    <TodoProvider>
      <Header />
      <Tasks />
    </TodoProvider>
    </>
  )
}

3- Passar qualquer value/state que você precisa compartilhar para outros componentes no seu Provider

return (
    <TodoContext.Provider value={{ tasks, setTasks }}>
      {children}
    </TodoContext.Provider>
  )

4- Usar esse estado com nosso useContext, assim, consumindo os estados em nossos componentes filhos:

export default function Task({ task }: Prop) {

  const { tasks, setTasks } = useContext(TodoContext)

😎 No fim, nossa aplicação poderá utilizar o estado de maneira fluida:

• A impressão que tive ao me deparar com o Context API, é que reduz significativamente a complexidade do gerenciamento de estado quando comparado ao React-Props E que não é bala de prata, pois quando nos deparamos com uma aplicação maior, onde se tem um time grande trabalhando em uma só aplicação, deveremos optar pela biblioteca Redux.