React.createContext point of defaultValue?

Just sharing my typical setup when using TypeScript, to complete answer from @tiomno above, because I think many googlers that ends up here are actually looking for this:

interface GridItemContextType {
    /** Unique id of the item */
    i: string;
}
const GridItemContext = React.createContext<GridItemContextType | undefined>(
    undefined
);

export const useGridItemContext = () => {
    const gridItemContext = useContext(GridItemContext);
    if (!gridItemContext)
        throw new Error(
            'No GridItemContext.Provider found when calling useGridItemContext.'
        );
    return gridItemContext;
};

The hook provides a safer typing in this scenario. The undefined defaultValue protects you from forgetting to setup the provider.

You can set the default values using useReducer hook, then the 2nd argument will be the default value:

import React, { createContext, useReducer } from "react";
import { yourReducer } from "./yourReducer";

export const WidgetContext = createContext();

const ContextProvider = (props) => {

  const { children , defaultValues } = props;
 
  const [state, dispatch] = useReducer(yourReducer, defaultValues);

  return (
    <WidgetContext.Provider value={{ state, dispatch }}>
      {children}
    </WidgetContext.Provider>
  );
};

export default ContextProvider;

// implementation

   <ContextProvider
                  defaultValues={{
                    disabled: false,
                    icon: undefined,
                    text: "Hello",
                    badge: "100k",
                    styletype: "primary",
                    dir: "ltr",
                    }}
                >
    </ContextProvider>
    

When there's no Provider, the defaultValue argument is used for the function createContext. This is helpful for testing components in isolation without wrapping them, or testing it with different values from the Provider.

---

Code sample:

import { createContext, useContext } from "react";

const Context = createContext( "Default Value" );

function Child() {
  const context = useContext(Context);
  return <h2>Child1: {context}</h2>;
}

function Child2() {
  const context = useContext(Context);
  return <h2>Child2: {context}</h2>;
}

function App() {

  return (
    <>
      <Context.Provider value={ "Initial Value" }>
        <Child /> {/* Child inside Provider will get "Initial Value" */}
      </Context.Provider>
        <Child2 /> {/* Child outside Provider will get "Default Value" */}
    </>
  );
}

Codesandbox Demo

My two cents:

After reading this instructive article by Kent C. Dodds as usual :), I learnt that the defaultValue is useful when you destructure the value returned by useContext:

Define the context in one corner of the codebase without defaultValue:

const CountStateContext = React.createContext() // <-- define the context in one corner of the codebase without defaultValue

and use it like so in a component:

const { count } = React.useContext(CountStateContext)

JS will obviously say TypeError: Cannot read property 'count' of undefined

But you can simply not do that and avoid the defaultValue altogether.

About tests, my teacher Kent has a good point when he says:

The React docs suggest that providing a default value "can be helpful in testing components in isolation without wrapping them." While it's true that it allows you to do this, I disagree that it's better than wrapping your components with the necessary context. Remember that every time you do something in your test that you don't do in your application, you reduce the amount of confidence that test can give you.

Extra for TypeScript; if you don't want to use a defaultValue, it's easy to please the lint by doing the following:

const MyFancyContext = React.createContext<MyFancyType | undefined>(undefined)

You only need to be sure to add the extra validations later on to be sure you have covered the cases when MyFancyContext === undefined

• MyFancyContext ?? 'default'
• MyFancyContext?.notThatFancyProperty

etc