In a previous post, we saw how to manage state using Unstated. As you might recall, Unstated uses React’s built-in setState to allow you create components that can consume state by subscribing to a provider — like the React’s Context API.
Well, we’re going to build off that last post by looking at Unstated Next, a library that author Jamie Kyle identifies as the “spiritual successor” to his Unstated project. Unstated Next provides both React Hooks and the Context API for managing state. Unstated was a minimal abstraction to the idea of React Hooks before they were a fully-fledged thing. But now that Hooks in React are so good, that abstraction is unnecessary and Unstated Next simply incorporates them while providing an API to share state and logic with the Hooks.
We’re going to specifically look at how to manage state in both single and multiple components using Unstated Next. It might be helpful to check out the previous post on Unstated prior to moving ahead, but it’s not totally necessary.
Example: A minimal form component
To start off, we’ll create a tiny React application for a form that merely contains a text input for a person’s name and a button to submit it. When the button is clicked, we’ll display the name as a paragraph element above the form. The source code for this example is available on GitHub.
This is going to be a Bootstrap React application which we can spin up by using Create React App. Let’s install that and then change directories into the project folder.
npx create-react-app unstated-next-form
cd unstated-next-form>We need to add Unstated Next as a dependency:
## yarn
yarn add unstated-next
## npm
npm install --save unstated-nextWe’ll be making use of React Hooks and createContainer from Unstated Next, so let’s import those into the App component:
// src/App.js
import React, { useState } from 'react';
import { createContainer } from "unstated-next";Next, we will create a custom hook. We’ll have our state in it, which …
It’s that time of year when everyone’s mind is less on work, than on vacation. So, we’ve tried to round up a few new tools and resources for designers that can make projects seem a little more like play. Enjoy!
Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 
Pop quiz: which of the following statements is sarcastic?
