English | 中文 | Русский
^{(Please contribute translations!)}

# Unstated Next > 200 bytes to never think about React state management libraries ever again - **React Hooks** _use them for all your state management._ - **~200 bytes** _min+gz._ - **Familiar API** _just use React as intended._ - **Minimal API** _it takes 5 minutes to learn._ - **Written in TypeScript** _and will make it easier for you to type your React code._ But, the most important question: Is this better than Redux? Well... - **It's smaller.** _It's 40x smaller._ - **It's faster.** _Componentize the problem of performance._ - **It's easier to learn.** _You already will have to know React Hooks & Context, just use them, they rock._ - **It's easier to integrate.** _Integrate one component at a time, and easily integrate with every React library._ - **It's easier to test.** _Testing reducers is a waste of your time, make it easier to test your React components._ - **It's easier to typecheck.** _Designed to make most of your types inferable._ - **It's minimal.** _It's just React._ So you decide. ### [See Migration From Unstated docs →](#migration-from-unstated) ## Install ```sh npm install --save unstated-next ``` ## Example ```js import React, { useState } from "react" import { createContainer } from "unstated-next" import { render } from "react-dom" function useCounter(initialState = 0) { let [count, setCount] = useState(initialState) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment } } let Counter = createContainer(useCounter) function CounterDisplay() { let counter = Counter.useContainer() return (

{counter.count}

) } function App() { return (

) } render(, document.getElementById("root")) ``` ## API ### `createContainer(useHook)` ```js import { createContainer } from "unstated-next" function useCustomHook() { let [value, setValue] = useState() let onChange = e => setValue(e.currentTarget.value) return { value, onChange } } let Container = createContainer(useCustomHook) // Container === { Provider, useContainer } ``` ### `` ```js function ParentComponent() { return ( ) } ``` ### `` ```js function useCustomHook(initialState = "") { let [value, setValue] = useState(initialState) // ... } function ParentComponent() { return ( ) } ``` ### `Container.useContainer()` ```js function ChildComponent() { let input = Container.useContainer() return } ``` ### `useContainer(Container)` ```js import { useContainer } from "unstated-next" function ChildComponent() { let input = useContainer(Container) return } ``` ## Guide If you've never used React Hooks before, I recommend pausing and going to read through [the excellent docs on the React site](https://reactjs.org/docs/hooks-intro.html). So with hooks you might create a component like this: ```js function CounterDisplay() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return (

You clicked {count} times

) } ``` Then if you want to share the logic behind the component, you could pull it out into a custom hook: ```js function useCounter() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment } } function CounterDisplay() { let counter = useCounter() return (

	Stars	Issues	Version	Updated	Created
mobx-react-lite	27,190	54	4.0.7	22 days ago	5 years ago
react-query			3.39.3	a year ago	10 years ago
unstated-next			1.1.0	5 years ago	5 years ago
zustand	42,336	6	4.5.2	2 months ago	5 years ago

mobx-react-lite vs react-query vs unstated-next vs zustand

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past