Exploring useState and useContext

By combining useState and useContext, we can create a simple global state. Let's recap on how to use useState without useContext, how useContext works for static values, and how we combine useState and useContext.

Using useState without useContext

Before diving into useContext, let's be reminded of how to useState, with a concrete example. This example is going to be a reference for the following examples in the chapter.

Here, we define a count state with useState higher in the component tree and pass the state value and the update function down the tree.

In the App component, we use useState and get count and setCount, which are passed to the Parent component. The code is illustrated in the following snippet:

const App = () => {
  const [count, setCount] = useState(0);
  return <Parent count={count} setCount={setCount} />;
};

This is a very basic pattern, which we know as lifting the state up...