Sending State Down a Component Tree

In this iteration, we will store state in the root of the Color Organizer, the App component, and pass the colors down to child components to handle the rendering. The App component will be the only component within our application that holds state. We will add the list of colors to the App with the useState hook.

import React, { useState } from "react";
import colorData from "./color-data.json";
import ColorList from "./ColorList.js";

export default function App() {
  const [colors] = useState(colorData);
  return <ColorList colors={colors} />;
}

The App component sits at the root of our tree. Adding useState to this component hooks it up with state management for colors. In this example, the colorData is the array of sample colors from above. The App component uses the colorData as the initial state for colors. From there, the colors are passed down to a component called the ColorList:

import React from "react";
import Color from "./Color";

export default function ColorList({ colors = [] }) {
  return (
    <div>
      {colors.length === 0 ? (
        <p>No Colors Listed. (Add a Color)</p>
      ) : (
        colors.map(color => <Color key={color.id} {...color} />)
      )}
    </div>
  );
}

The ColorList receives the colors from the App component as props. If the list is empty, this component will display a message to our users. When we have a color array we can map over it and pass the details about each color further down the tree to the Color component:

export default function Color({ title, color, rating }) {
  return (
    <section>
      <h1>{title}</h1>
      <div style={{ height: 50, backgroundColor: color }} />
      <StarRating selectedStars={rating} />
    </section>
  );
}

The Color component expects three properties: title, color, and rating. These values are found in each color object and were passed to this component using the spread operator <Color {...color} />. This takes each field from the color object and passes it to the Color component as a property with the same name as the object key. The Color component displays these values. The title is rendered inside of a heading one element. The color value is displayed as the backgroundColor for a div element. The rating is passed further down the tree to the StarRating component which will display the rating visually as selected stars:

export default function StarRating({ totalStars = 5, selectedStars = 0 }) {
  return (
    <>
      {createArray(totalStars).map((n, i) => (
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => onRate(i + 1)}
        />
      ))}
      <p>
        {selectedStars} of {totalStars} stars
      </p>
    </>
  );
}

This StarRating component has been modified. We’ve turned it into a Pure Component. A Pure Component is a function component that does not contain state and will render the same user interface given the same props. We made this component a pure component because the state for color ratings are stored in the colors array at the root of the component tree. Remember the goal of this iteration is to store state in a single location and not have it distributed through many different components within the tree.

At this point we have finished passing state down the component tree from the App component all the way to each Star component that is filled red to visually represent the rating for each color. If we render the app based on the color-data.json that was listed above we should see our colors in the browser:

Figure 6-5. Color Organizer rendered in the browser

Sending Interactions back up a Component Tree

So far, we’ve rendered a representation of the colors array as UI by composing React components and passing data down the tree from parent component to child component via props. What happens if we want to remove a color from the list or change the rating of a color in our list? The colors are stored in state at the root of our tree. We’ll need to collect interactions from child components and send them back up the tree to the root component where we can change the state.

For instance, let’s say we wanted to add a delete button next to each color’s title that would allow users to remove colors from state. We would add that button to the Color component:

import { FaTrash } from "react-icons/fa";

export default function Color({ id, title, color, rating, onRemove = f => f }) {
  return (
    <section>
      <h1>{title}</h1>
      <button onClick={() => removeColor(id)}>
        <FaTrash color="red" />
      </button>
      <div style={{ height: 50, backgroundColor: color }} />
      <StarRating selectedStars={rating} />
    </section>
  );
}

Here we have modified the color by adding a button that will allow users to remove colors. First, we imported a trash can icon from react-icons. Next we wrapped the FaTrash icon in a button. Adding an onClick handler to this button allows us to invoke the onRemove function property which has been added to our list of properties along with the id. When a user clicks the remove button, we will invoke removeColor and pass it the id of the color that we want to remove. That is why the id value has also been gathered from the Color component’s properties.

This solution is great because we keep the Color component pure. It doesn’t have state, and can easily be reused in a different part of the app or another application all together. The Color component is not concerned with what happens when a user clicks the remove button. All it cares about is notifying the parent that this event has occurred and passing the information about which color the user wishes to remove. It is now the parent’s responsibility to handle this event:

export default function ColorList({ colors = [], onRemoveColor = f => f }) {
  return (
    <div className="color-list">
      {colors.length === 0 ? (
        <p>No Colors Listed. (Add a Color)</p>
      ) : (
        colors.map(color => (
          <Color key={color.id} {...color} onRemove={onRemoveColor} />
        ))
      )}
    </div>
  );
}

The Color component’s parent is the ColorList. This component also doesn’t have access to state. Instead of removing the color, it simply passes the event up to it’s parent. It accomplishes this by adding an onRemoveColor function property. If a Color component invokes the onRemove property, the ColorList will in turn invoke it’s onRemoveColor property and send the responsibility for removing the color up to it’s parent. The color’s id is still being passed to the onRemoveColor function.

The parent of the ColorList is the App. This component is the component that has been hooked up with state. This is where we can capture the color id and remove the color in state:

export default function App() {
  const [colors, setColors] = useState(colorData);
  return (
    <ColorList
      colors={colors}
      onRemoveColor={id => {
        const newColors = colors.filter(color => color.id !== id);
        setColors(newColors);
      }}
    />
  );
}

First, we’ve added a variable for setColors. Remember the second argument in the array returned by useState is a function that we can use to modify the state. When the ColorList raises an onRemoveColor event we capture the id of the color to remove from the arguments and use it to filter the list of colors to exclude the color that the user wants to remove. Next, we change the state. We use the setColors function to change change the array of colors to the newly filtered array.

Changing the state of the colors array causes the App component to be re-rendered with the new list of colors. Those new colors are passed to the ColorList component which is also re-rendered. It will render Color components for the remaining colors and our UI will reflect the changes that we have made, it will render one less color.

If we want to rate the colors that are stored in the App components state we’ll have to repeat the process with an onRate event. First we’ll have to collect the new rating from the individual star that was clicked and pass that value to the parent of the StarRating:

export default function StarRating({
  totalStars = 5,
  selectedStars = 0,
  onRate = f => f
}) {
  return (
    <>
      {createArray(totalStars).map((n, i) => (
        <Star
          key={i}
          selected={selectedStars > i}
          onSelect={() => onRate(i + 1)}
        />
      ))}
      ...
    </>
  );
}

Then we would have to grab the rating from the onRate handler that we added to the StarRating component. We then pass the new rating along with the id of the color to be rated up to the Color component’s parent via another onRate function property:

export default function Color({
  id,
  title,
  color,
  rating,
  onRemove = f => f,
  onRate = f => f
}) {
  return (
    <section>
      <h1>{title}</h1>
      <button onClick={() => removeColor(id)}>
        <FaTrash color="red" />
      </button>
      <div style={{ height: 50, backgroundColor: color }} />
      <StarRating
        selectedStars={rating}
        onRate={rating => onRate(id, rating)}
      />
    </section>
  );
}

In the ColorList component, we would have to capture onRate event from individual color components and pass them up to it’s parent via the onRateColor function property:

export default function ColorList({
  colors = [],
  onRemoveColor = f => f,
  onRateColor = f => f
}) {
  return (
    <div className="color-list">
      {colors.length === 0 ? (
        <p>No Colors Listed. (Add a Color)</p>
      ) : (
        colors.map(color => (
          <Color
            key={color.id}
            {...color}
            onRemove={onRemoveColor}
            onRate={onRateColor}
          />
        ))
      )}
    </div>
  );
}

Finally, after passing the event up through all of these components we arrive at the App, where state is stored and the new rating can be saved:

export default function App() {
  const [colors, setColors] = useState(colorData);
  return (
    <ColorList
      colors={colors}
      onRateColor={(id, rating) => {
        const newColors = colors.map(color =>
          color.id === id ? { ...color, rating } : color
        );
        setColors(newColors);
      }}
      onRemoveColor={id => {
        const newColors = colors.filter(color => color.id !== id);
        setColors(newColors);
      }}
    />
  );
}

The App component will change color ratings when the ColorList invokes the onRateColor property with the id of the color to rate and the new rating. We will use those values to construct an array of new colors by mapping over the existing colors and changing the rating for the color that matches the id property. Once we send the newColors to the setColors function the state value for colors will change and the App component will be invoked with a new value for the colors array.

Using Refs

When it is time to build a form component in React there are several patterns available to you. One of these patterns involves accessing the DOM node directly using a React feature called refs. In React, a ref is an mutable object that stores values for the lifetime of a component. There are several use cases that involve using refs, in this section we will look at how we can access a DOM node directly with a ref.

React provides us with a useRef hook that we can ue to create a ref. We will use this hook when building the AddColorForm component:

import React, { useRef } from "react";

export default function AddColorForm({ onNewColor = f => f }) {
  const txtTitle = useRef();
  const hexColor = useRef();

  const submit = e => { ... }

  return (...)
}

First, when creating this component we will also create two refs using the useRef hook. The txtTitle ref will be used to reference the text input that we’ve added to the form to collect the color title. The hexColor ref will be used to access hexadecimal color values from the HTML color input. We can set the values for these refs directly in JSX using the ref property:

  return (
    <form onSubmit={submit}>
      <input ref={txtTitle} type="text" placeholder="color title..." required />
      <input ref={hexColor} type="color" required />
      <button>ADD</button>
    </form>
  );
}

Here we set the value for the txtTitle and hexColor refs by adding the ref attribute to these input elements in JSX. This creates a current field on our ref object that references the DOM element directly. This provides us access to the DOM element, which means we can capture it’s value. When the user submits this form by clicking the “ADD” button we will invoke the submit function:

const submit = e => {
  e.preventDefault();
  const title = txtTitle.current.value;
  const color = hexColor.current.value;
  onNewColor(title, color);
  txtTitle.current.value = "";
  txtColor.current.value = "";
};

When we submit HTML forms, by default they send a POST request to the current url with the values of the form elements stored in the body. We don’t want to do that. This is why the first line of code in the submit function is e.preventDefault(), which prevents the browser from trying to submit the form with a POST request.

Next, we capture the current values for each of our form elements using their refs. These values are then passed up to this component’s parent via the onNewColor function property. Both the title and the hexadecimal value for the new color are passed as function arguments. Finally, we reset the value attribute for both inputs to clear the data and prepare the form to collect another color.

Did you notice the subtle paradigm shift has occurred by using refs? We are mutating the value attribute of DOM nodes directly by setting them equal to "" empty strings. This is imperative code. The AddColorForm is now what we call an uncontrolled component because it uses the DOM to save the form values. Sometimes using uncontrolled component can get you out of problems. For instance, you may want to share access to a form and it’s values with code outside of React. However, a controlled component is a better approach.

Controlled Components

In controlled component the from values are managed by React and not the DOM. They do not require us to use refs. They do not require us to write imperative code. Adding features like robust form validation are much easier when working with a controlled components. Let’s modify the AddColorForm by giving it control over the form’s state:

import React, { useState } from "react";

export default function AddColorForm({ onNewColor = f => f }) {
  const [title, setTitle] = useState("");
  const [color, setColor] = useState("#000000");

  const submit = e => { ... };

  return ( ... );
}

First, instead of using refs we are going to save the values for the title and color using React state. Instead of useRef we will state create variables for title and color. Additionally, we will also define the functions that can be used to change state: setTitle and setColor.

Now that the component controls the values for title and color, we can display them inside of the form input elements by setting the value attribute. Once we set the value attribute of an input element, we will no longer be able to change with the form. The only way to change the value at this point would be to change the state variable every time the user types a new character in the input element. That is exactly what we’ll do:

<form onSubmit={submit}>
  <input
    value={title}
    onChange={event => setTitle(event.target.value)}
    type="text"
    placeholder="color title..."
    required
  />
  <input
    value={color}
    onChange={event => setColor(event.target.value)}
    type="color"
    required
  />
  <button>ADD</button>
</form>
}

This controlled component now sets the value of both input elements using the title and color from state. Whenever these elements raise an onChange event we can access the new value using the event argument. The event.target is a reference to the DOM element so we can obtain the current value of that element with event.target.value. When the title changes, we’ll invoke setTitle to change the title value in state. Changing that value will cause this component to re-render and we can now display the new value for title inside the input element. Changing the color works exactly the same way.

When it is time to submit the form we can simply pass the state values for title and color to the onNewColor function property as arguments when we invoke it. The setTitle and setColor functions can be used to reset the values after the new color has been passed to the parent component.

const submit = e => {
  e.preventDefault();
  onNewColor(title, color);
  setTitle("");
  setColor("");
};

It’s called a controlled component, because React controls the state of the form. It’s worth pointing out that controlled form components are re-rendered, a lot. Think about it, every new character typed in the title field causes the AddColorForm to re-render. Using the color wheel in the color picker causes this component to re-render way more than the title field because the color value repeatably changes as you drag the mouse around the color wheel. This is ok, React is designed to handle this type of work load. Hopefully knowing that controlled components are re-rendered frequently will prevent us from adding some long and expensive process to this component. At the very least this knowledge will come in handy when you are trying to optimize your React components.

Creating Custom Hooks

Whey you have a large form with a lot of input elements you may be tempted to copy and paste these two lines of code:

value={title}
onChange={event => setTitle(event.target.value)}

It might seem like you are working faster to simply copy and paste these properties into every form element while tweaking the variables names along the way. However, whenever you copy and paste code you should hear a tiny little alarm sound in your head. Copying and pasting code suggests that there is something redundant enough to abstract away in a function.

We can package the details necessary to create controlled form components into a custom hook. We could create our own useInput hook where we can abstract away the redundancy involved with creating controlled form inputs:

import { useState } from "react";

export const useInput = initialValue => {
  const [value, setValue] = useState(initialValue);
  return [
    { value, onChange: e => setValue(e.target.value) },
    () => setValue(initialValue)
  ];
};

This is a custom hook. It doesn’t take a lot of code. Inside of this hook we are still using the useState hook to create a state value. Next we return an array. The first value of the array is the object that contains the same properties that we were tempted to copy and paste: the value from state along with an onChange function property that changes that value in state. The second value in the array is a function that can be reused to reset the value back to its initial value. We can use our hook inside of the AddColorForm:

import React from "react";
import { useInput } from "./hooks";

export default function AddColorForm({ onNewColor = f => f }) {
  const [titleProps, resetTitle] = useInput("");
  const [colorProps, resetColor] = useInput("");

  const submit = event => { ... }

  return ( ... )
}

The useState hook is encapsulated within our useInput hook. We can obtain the properties for both the title and the color by destructuring them from the first value of the returned array. The second value of this array contains a function that we can use to reset the value property back to its initial value, an empty string. The titleProps and colorProps are ready to be spread into their corresponding input elements:

return (
  <form onSubmit={submit}>
    <input
      {...titleProps}
      type="text"
      placeholder="color title..."
      required
    />
    <input {...colorProps} type="color" required />
    <button>ADD</button>
  </form>
);
}

Spreading these properties from our custom hook is much more fun than pasting them. Now both the title and the color inputs are receiving properties for their value and onChange events. We’ve used our hook to create controlled form inputs without worrying about the underlying implementation details. The only other change that we need to make is when this form is submitted:

const submit = event => {
  event.preventDefault();
  onNewColor(titleProps.value, colorProps.value);
  resetTitle();
  resetColor();
};

Within the submit function, we need to be sure to grab the value for both the title and the color from their properties. Finally, we can use the custom reset functions that were returned from the useInput hook.

Hooks are designed to be used inside of React components. We can compose hooks within other hooks because eventually the customized hook will be used inside of a component. Changing the state within this hook still causes the AddColorForm to re-render with new values for titleProps or colorProps.

Adding Colors to State

Both the controlled form component and the uncontrolled from component pass the values for title and color to the parent component via the onNewColor function. The parent doesn’t care whether we used a controlled component or uncontrolled component, it only wants the values for the new color.

Let’s add the AddColorForm, whichever one you choose, to the the App component. When the onNewColor property is invoked we will save the new color in state:

import React, { useState } from "react";
import colorData from "./color-data.json";
import ColorList from "./ColorList.js";
import AddColorForm from "./AddColorForm";
import { v4 } from "uuid";

export default function App() {
  const [colors, setColors] = useState(colorData);
  return (
    <>
      <AddColorForm
        onNewColor={(title, color) => {
          const newColors = [
            ...colors,
            {
              id: v4(),
              rating: 0,
              title,
              color
            }
          ];
          setColors(newColors);
        }}
      />
      <ColorList .../>
    </>
  );
}

When a new color is added the onNewColor property is invoked. The title and hexadecimal value for the new color are passed to this function as arguments. We use these arguments to create a new array of colors. First, we spread the current colors from state into the new array. Then we add an entirely new color object using the title and color values. Additionally, we set the rating of the new color to 0, because it has not yet been rated. We also use the v4 function found in the uuid package to generate a new unique id for the color. Once we have a array of colors that contains our new color, we save it to state by invoking setColors. This causes the App component to re-render with a new array of colors. That new array will be used to update the UI. We will see the new color at bottom of the list.

With this change, we complete the first iteration on the Color Organizer. Users can now add new colors to the list, remove colors from the list, and rate any existing color on that list.

Placing Colors in Context

In order to use context in React, we must first place some data in a context provider and add that provider to our component tree. React comes with a function called createContext that we can use to create a new context object. This object contains two components: a context Provider and a Consumer.

Let’s place the default colors found in the color-data.json file in to context. We’ll add context to the index.js file, the entry point of our application:

import React, { createContext } from "react";
import colors from "./color-data";
import { render } from "react-dom";
import App from "./App";

export const ColorContext = createContext();

render(
  <ColorContext.Provider value={{ colors }}>
    <App />
  </ColorContext.Provider>,
  document.getElementById("root")
);

Using createContext we created a new instance of React context that we named ColorContext. The color context contains two components: the ColorContext.Provider and the ColorContext.Consumer. We need to use the provider to place the colors in state. We add data to context by setting the value property of the Provider. In this scenario, we added an object containing the colors to context. Since we wrapped the entire App component with the provider the array of colors will made available to any context consumers found in our entire component tree. It is important to notice that we’ve also exported the ColorContext from this location. This is necessary because we will need to access the ColorContext.Consumer when we want to obtain the colors from context.

Now that we are providing the colors value in context, the App component no longer needs to hold state and pass it down to it’s children as props. We have made the App component a “fly over” component. The Provider is the App’s parent, it is providing the colors in context. The ColorList is the App component’s child, it can obtain the colors directly on its own. So the app doesn’t need to touch the colors at all, which is great because the App component itself has noting to do with colors. That responsibility has been delegated further down the tree.

We can remove a lot of lines of code from the App. It only needs to render the AddColorForm and the ColorList. It no longer has to worry about the data:

import React from "react";
import ColorList from "./ColorList.js";
import AddColorForm from "./AddColorForm";

export default function App() {
  return (
    <>
      <AddColorForm />
      <ColorList />
    </>
  );
}

Retrieving Colors with useContext

The addition of hooks make working with context a joy. The useContext hook is used to obtain values from context. It obtains those values that we need from the context Consumer. The ColorList component no longer needs to obtain the array of colors from its properties. It can access them directly via the useContext hook:

import React, { useContext } from "react";
import { ColorContext } from "./";
import Color from "./Color";

export default function ColorList() {
  const { colors } = useContext(ColorContext);
  return (
    <div className="color-list">
      {colors.length === 0 ? (
        <p>No Colors Listed. (Add a Color)</p>
      ) : (
        colors.map(color => <Color key={color.id} {...color} />)
      )}
    </div>
  );
}

We’ve modified the ColorList component. We’ve removed the colors=[] property because the colors are being retrieved from context. The useContext hooks requires the context instance to obtain values from it. The ColorContext instance is being imported from the index.js file where we create the context and add the provider to our component tree. The ColorList can now construct a user interface based on the data that has been provided in context.

export default function ColorList() {
  return (
    <ColorContext.Consumer>
      {context => {
        return (
          <div className="color-list">
            {context.colors.length === 0 ? (
              <p>No Colors Listed. (Add a Color)</p>
            ) : (
              context.colors.map(color => <Color key={color.id} {...color} />)
            )}
          </div>
        )
      }}
    </ColorContext.Consumer>
  )
}

Stateful Context Providers

The context provider can place an object into context, but it can’t mutate the values in context on its own. It needs some help from a parent component. The trick is to create a stateful component that renders a context provider. When the state of the stateful component changes it will re-render the context provider with new context data. Any of the context providers children will also be re-rendered with the new context data.

The stateful component that renders the context provider is your custom provider. That is the component that will be used to when it is time to wrap your App with the provider. In a brand new file, let’s create a ColorProvider:

import React, { createContext, useState } from "react";
import colorData from "./color-data.json";

const ColorContext = createContext();

export const ColorProvider = ({ children }) => {
  const [colors, setColors] = useState(colorData);
  return (
    <ColorContext.Provider value={{ colors, setColors }}>
      {children}
    </ColorContext.Provider>
  );
};

The ColorProvider is a component that renders the ColorContext.Provider. Within this component, we have created a state variable for colors using the useState hook. The initial data for colors is still being populated from color-data.json. Next, the ColorProvider adds the colors from state to context using the value property of the ColorContext.Provider. Any children rendered within the ColorProvider will be wrapped by the ColorContext.Provider and will have access to the colors array from context.

You may have noticed that the setColors function is also being added to context. This gives context consumers the ability to change the value for colors. Whenever setColors is invoked, the colors array will change. This will cause the ColorProvider to re-render and your UI will update itself to display the new colors array.

Adding the setColors to context may not be the best idea. It invites other developers and yourself to make mistakes later on down the road when using it. There are only three options when it comes to chancing the value of the colors array. Users can add colors, remove colors, or rate colors. It’s a better idea to add functions for each of these operations to context. This way you do not expose the setColors function to consumers. You only expose functions for the changes that they are allowed to make.

export const ColorProvider = ({ children }) => {
  const [colors, setColors] = useState(colorData);

  const addColor = (title, color) =>
    setColors([
      ...colors,
      {
        id: v4(),
        rating: 0,
        title,
        color
      }
    ]);

  const rateColor = (id, rating) =>
    setColors(
      colors.map(color => (color.id === id ? { ...color, rating } : color))
    );

  const removeColor = id => setColors(colors.filter(color => color.id !== id));

  return (
    <ColorContext.Provider value={{ colors, addColor, removeColor, rateColor }}>
      {children}
    </ColorContext.Provider>
  );
};

That looks better. We added functions to context for all of the operations that can be made on the colors array. Now any component within our tree can consume these operations and make changes to colors using simple functions that we can document.

Custom Hooks with Context

There is one more killer change that we can make. The introduction of hooks has made it so that we do not have to expose Context to consumer components at all. Let’s face it, context can be confusing for team members who are not reading this book. We can make everything much easer for them by wrapping context in a custom hook. Instead of exposing the ColorContext instance, we can create a hook called useColors that returns the colors from context.

import React, { createContext, useState, useContext } from "react";
import colorData from "./color-data.json";
import { v4 } from "uuid";

const ColorContext = createContext();
export const useColors = () => useContext(ColorContext);

This one simple change makes a huge impact on architecture. We have wrapped all of the functionality necessary to render and work with stateful colors in a single javascript module. Context is contained to this module, yet exposed through a hook. This works because we return context using the useContext hook which has access to the ColorContext locally in this file. It is now appropriate to rename this module color-hooks.js and distribute this functionality for wider use by the community.

Consuming colors using the ColorProvider and the useColors hook is a joyous event. This is why we program. Let’s take this hook out for a spin in the current Color Organizer app. First, we need to wrap our App component with the custom ColorProvider. We can do this in the index.js file:

import React from "react";
import { ColorProvider } from "./color-hooks.js";
import { render } from "react-dom";
import App from "./App";

render(
  <ColorProvider>
    <App />
  </ColorProvider>,
  document.getElementById("root")
);

Now any component that is a child of the App can obtain the colors from the useColors hook. The ColorList components needs to access the colors array to render the colors on the screen:

import React from "react";
import Color from "./Color";
import { useColors } from "./color-hooks";

export default function ColorList() {
  const { colors } = useColors();
  return ( ... );
}

We have removed any references to context from this component. Everything it needs is now being provided from out hook. The Color component could use our hook to obtain the functions for rating and removing colors directly:

import React from "react";
import StarRating from "./StarRating";
import { useColors } from "./color-hooks";

export default function Color({ id, title, color, rating }) {
  const { rateColor, removeColor } = useColors();
  return (
    <section>
      <h1>{title}</h1>
      <button onClick={() => removeColor(id)}>X</button>
      <div style={{ height: 50, backgroundColor: color }} />
      <StarRating
        selectedStars={rating}
        onRate={rating => rateColor(id, rating)}
      />
    </section>
  );
}

Now the Color component no longer needs to pass events to the parent via function props. It has access to the rateColor and removeColor functions in context. They are easily obtained through the useColors hook. This is a lot of fun, but we are not finished yet. The AddColorForm can also benefit from the useColors hook:

import React from "react";
import { useInput } from "./hooks";
import { useColors } from "./color-hooks";

export default function AddColorForm() {
  const [titleProps, resetTitle] = useInput("");
  const [colorProps, resetColor] = useInput("#000000");
  const { addColor } = useColors();

  const submit = e => {
    e.preventDefault();
    addColor(titleProps.value, colorProps.value);
    resetTitle();
    resetColor();
  };

  return ( ... );
}

The AddColorForm component can add colors directly with the addColor function. When colors are added, rated, or removed, the state of the colors value in context will change. When this change happens, the children of the ColorProvider are re-rendered with new context data. All of this is happening through a simple hook.

Hooks provide software developers with the stimulation that they need to stay motivated and enjoy front end programming. This is primarily because they are an awesome tool for separating concerns. Now React components only need to concern themselves with rendering other react components and keeping the user interface up to data. React hooks can concern themselves with the logic that is required to make the app work. Both UI and hooks can be developed separately, tested separately, even deployed separately. This is all very good news for React.

We have only scratched the surface of what can be accomplished with hooks. In the next chapter, we’ll dive a little deeper.