There are some which require less boilerplate and actually are (partially significantly) smaller in size.

https://github.com/jamiebuilds/unstated https://github.com/dai-shi/react-tracked https://github.com/react-spring/zustand https://github.com/diegohaz/constate

(there are more, but these may be among the most popular)

You can find a comparison (and more) here: https://github.com/dai-shi/lets-compare-global-state-with-re...

Redux Toolkit https://github.com/reduxjs/redux-toolkit solved the problem of having too much boilerplate for me. Slices also make it organizing state a breeze.

You can use a React Context and have simple global state in your React app. If you like reducers, throw in a useReducer hook and you have a large part of what people use Redux for.

I've done that recently, and I had many performance issues. I have a long-ish list of very simple components that are in a sorted order. So when I change the value of one, I re-sort the list. I was hoping React would only rerender the changed items (remove old, insert new). But no, it rerenders the whole list, which takes 500ms. I made sure object references in the list stay the same, that didn't help.

I can implement this thing in vanilla JS, and it would not take more than a few milliseconds. React is cool, but so damn hard to optimize.

It's important to distinguish between React "rendering" (asking components what they want the UI to look like), and actually applying updates to the DOM.

React's default behavior is that when a component renders, React will recursively re-render _all_ of its descendants. it then diffs the VDOM render output to see if you've asked for any changes to the UI since the last time it updated. If the two VDOM trees are the same, React says "nope, nothing to do here!", and ends the render pass. _If_ you requested changes, it then gathers them up and applies them all to the DOM in one step.

You can optimize the rendering behavior in some ways if needed. The `React.memo()`, `PureComponent`, and `shouldComponentUpdate` APIs [0] allow you to tell React to skip re-rendering if you know that a component's props haven't meaningfully changed, and thus would result in the same UI output as the last time. This does require that the child components be separate component types (ie, `<MyComponent />`), not just the parent rendering a bunch of plain elements (like `<div>`).

For lists in particular, React needs to know how to identify which items are which. React doesn't care about object references, but you can pass a special prop called a `key` when rendering items in a list. That way, if you move a list item up, swap a couple others, delete one, and add a couple more, React knows what existing list items ended up where, and can update the DOM efficiently in response. Otherwise, changes to lists without good use of keys can result in more DOM work being done than actually necessary.

[0] https://reactjs.org/docs/react-api.html#reactmemo

[1] https://reactjs.org/docs/lists-and-keys.html

I've recently had success using https://github.com/rematch/rematch for a small project. Significantly less boilerplate, though admittedly the documentation is a bit sparse.

I had a similar problem when I started using Redux for a side project. If it's a simple enough app (as mine was) try https://www.npmjs.com/package/unstated. I am not a React expert but this was super simple and easy to get up and running with.

[No affiliation with the project]

There's stuff like MobX, but much of the point of Redux is the reducer step.

You may be happy with just using hooks, though.

Do you mean the point of Redux?

You saw nothing. Nothing!

(Yes, thank you, edited.)

Use mobx! It's 5% of the code you would have to write using redux and their gigantic box of tools.

Also check out mobx-state-tree...made by the same people and more suited towards large applications.

I personally love mobx-state-tree (and mobx!). I really wish more would not jump straight for redux/etc without giving the powerful abstraction of observables via mobx a shot.

Yes, mobx state tree is great and should be use more frequently.

Try mine! https://github.com/gunn/pure-store

Super simple, 100% test coverage, 100% typesafe if using typescript, absolutely no boilerplate.

Edit: Just checked out the code. This really looks like an event emitter with Immer. Is that fair to say? I totally dig the simplicity of it.

hooks and the context api are great for small projects. Check out the hooks comparison section in the linked article to understand how it might fit your app. It references other good resources, too.

The Reducks pattern https://github.com/erikras/ducks-modular-redux fixes the boilterplate problem by keeping your action types, action creators, and reducers in the same file.