React'te Context API Kullanımı

Context API, React uygulamalarında global durumu yönetmek için kullanılır. Aşağıda adım adım nasıl kullanılacağını görebilirsiniz.

1. Context Oluşturma

Öncelikle bir context oluşturmamız gerekiyor:

• import { createContext } from 'react';
• const MyContext = createContext();

2. Provider ile Sarma

Context'i sağlayacak bir bileşen oluşturun:

• const MyProvider = ({ children }) => {
•   const [state, setState] = useState(initialValue);
•   return (MyContext.Provider value={{ state, setState }});
• }

3. Consumer ile Kullanma

Context'i kullanmak istediğiniz bileşende consume edin:

• import { useContext } from 'react';
• const { state, setState } = useContext(MyContext);
• console.log(state);

4. Uygulamayı Tamamlama

Provider ile uygulamanın kök bileşenini sarın:

• ReactDOM.render(, document.getElementById('root'));

Artık Context API kullanarak durumu paylaşabilirsiniz.