React’te Context API nasıl kullanılır?

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.