9. Czym jest context?

W React, przekazywanie propsów w dół drzewa komponentów może być uciążliwe - szczególnie, gdy nisko zagnieżdzony komponent potrzebuje wartości od wysoko zagnieżdżonego rodzica. Przekazywanie właściwości w dół, poprzez komponenty, które ich nie potrzebują, nazywane jest dosłownie przewiercaniem właściwości, czyli prop drilling.

const ParentComponent = () => {
    const [parentState, setParentState] = useState(20);
    return <MidComponent val={parentState} />;
}

const MidComponent = ({val}) => {
    return <LowerComponent val={val} />;
}

const LowerComponent = ({val}) => {
    return <div> Value is equal: {val}</div>;
}

W powyższym przykładzie, komponent MidComponent przyjmuje prop val, mimo że sam z niego nie korzysta.

Context jest właściwością Reacta, która pozwala na uniknięcie takich sytuacji. Jest to pojemnik na dane i funkcje, do którego mają dostęp wskazane komponenty. Można w nim zapisać wartość stanu dowolnego komponentu oraz funkcję, która pozwoli ten stan zaktualizować.

Aby skorzystać z contextu, należy go zdefiniować:

const MyContext = createContext(defaultValue)

Następnie, w górze drzewa komponentów, należy wyrenderować Context Provider aby wszystkie wyrenderowane wewnątrz komponenty miały do niego dostęp. W komponencie, w którym potrzebny jest stan contextu, wystarczy zwrócić Context Consumer lub skorzystać z hooka useContext:

const ParentComponent = () => {
    const [parentState, setParentState] = useState(20);

    // pass desired values which wil be held in context
    return <MyContext.Provider value={{parentState, setParentState}}> 
        <MidComponent />
     </MyContext.Provider>
}

const MidComponent = () => {
    return <LowerComponent />;
}

const LowerComponent = ({val}) => {
    return <MyContext.Consumer>
        {context => 
            <div> Value is equal: {context.parentState}</div>;
        }
    </MyContext.Consumer>

    //or 

    const context = useContext(MyContext);
    return  <div> Value is equal: {context.parentState}</div>;


}

Dokumentacja odnośnie contextu dostępna jest tutaj.