06 RN - Context

State

Callbacks

Context API/Redux

Context vs Prop Drilling

Global/Context API vs Prop Drilling

When to Use Context

Context is designed to share data that can be considered "global" for a tree (or subtree) of React components.

Context is primarily used when some data needs to be accessible by many components at different nesting levels.

Context API

Create context

export const AppContext = React.createContext<IAppContext>(defaultValue);

Also creates Provider and Consumer.

Consumer is mainly used in class components.

export const AppContextProvider = AppContext.Provider;
export const AppContextConsumer = AppContext.Consumer;

Context Provider

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes

return (
      <AppContextProvider value={state} >
        <View style={styles.main}>

or

return (
      <AppContext.Provider value={state} >
        <View style={styles.main}>

defaultValue from createContext is only used, when provider is not found!

useContext hook

const value = useContext(AppContext);

Accepts a context object (the value returned from React.createContext) and returns the current context (from provider) value for that context. The current context value is determined by the value prop of the nearest above the calling component in the tree.

Mutating context

Include methods for updating the state in the Context object

export interface IAppContext {
    moves: number,
    changeMoves: (amount: number) => void,
    setMoves: (amount: number) => void,
}

Use regular state in upper/root component and provide value for update function.

const App = () => {
  const [state, setState] = useState(defaultValue);

  const updateMovesFn = (amount: number) => {
    setState({...state, moves: state.moves + amount});
  };

  return (
    <AppContext.Provider value={{...state, changeMoves: updateMovesFn}}>
      <View