Build a Search Component in React with useContext

The useContext hook allows you to leverage the React Context API within your function components. This lets your components provide data to their descendants in the component tree while avoiding "prop drilling" (i.e. passing props through components that are not concerned with the data).

When instantiating the hook, it takes one argument: a React context. This subscribes the component to the context and any updated values being provided by the Context.Provider. Then, any data being provided by the parent component will be accessible in this component via the context.current field.

// Create a context
const SearchContext = React.createContext();

// Subscribe to SearchContext
const context = useContext(SearchContext);