Simple Way To Use React Hooks With Context For State Management

This one file will show you from start to finish how to make a simple state management system using only React Hooks & Context.

My hope is that this barebones example will help you understand how the fundamental pieces are interconnected which will allow you to build on to it from there.

Option 1: Play in CodeSandbox

Option 2: Check out the code

Usually you'd break these pieces of code up into different files and import them when needed.

For this example I kept the code together in one file, but I added comments to show which separate files they would belong to if you were to split them up.

import React from "react";
import ReactDOM from "react-dom";

// StoreContext.js
const StoreContext = React.createContext();

// App.js
function App() {
  const { ingredientStore } = React.useContext(StoreContext);
  const { ingredients, setIngredients } = ingredientStore;
  const [newIngredient, setNewIgredient] = React.useState("");
  const handleNewIngredient = () => {
    setIngredients(state => [...state, newIngredient]);
    setNewIgredient("");
  };

  const renderIngredient = ingredient => <li key={ingredient}>{ingredient}</li>;

  return (
    <>
      <h1>Ingredients</h1>
      <label htmlFor="ingredient">Add New Ingredient: </label>
      <input
        name="ingredient"
        onChange={ev => setNewIgredient(ev.target.value)}
        type="text"
        value={newIngredient}
      />{" "}
      <button onClick={handleNewIngredient}>Add</button>
      <ul>{ingredients.map(renderIngredient)}</ul>
    </>
  );
}

// useIngredientStore.js
const useIngredientsStore = () => {
  const [ingredients, setIngredients] = React.useState(["Noodles", "Sauce"]);
  return {
    ingredients,
    setIngredients
  };
};

// StateProvider.js
function StateProvider({ children }) {
  const ingredientStore = useIngredientsStore();
  const store = { ingredientStore };
  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
}

// index.js
const rootElement = document.getElementById("root");
ReactDOM.render(
  <StateProvider>
    <App />
  </StateProvider>,
  rootElement
);