use-context-selector
zustand
Our great sponsors
use-context-selector | zustand | |
---|---|---|
27 | 243 | |
2,436 | 41,646 | |
- | 4.8% | |
6.0 | 8.9 | |
7 days ago | 2 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
use-context-selector
-
Having too many contexts - is it a problem?
Use jotai, or as someone else mentioned, zustand. React Context out of the box requires a very deliberate mental model due to a lack of tooling around selecting slices of state. This is why packages like react-context-selector exist: https://github.com/dai-shi/use-context-selector
-
Truly the best time to be a cs student
Unless I've missed it, context doesn't have selector IIRC. You'd have to use a third party solution useContextSelector
-
use-next-context: Performance-optimized React Context API.
How does this differ from https://github.com/dai-shi/use-context-selector?
-
React I Love You, But You're Bringing Me Down
I wouldn't call this easy
-
is Redux the first state management library you'll advise beginners to learn these days?
It wouldn't be clear to anyone learning Context API either. At least, not using official docs. Because Context API is not supposed for state management, and if you for some unknown reasons try to roll your own state management on top of it, you have to use tricky libraries to work around the issues resulting from such abuse.
-
What are some React Tricks/Tips for React Devs?
Any time anything in the context changes, any component that is consuming it will re-render. If you use it for frequently changed values, this library is needed to reduce unnecessary re-renders.
-
Surprising Performance Lessons from React Microfrontends in Production
Use of this implementation of useContextSelector
-
Inflist, an experiment using PureScript and React
Another technology I use regularly is Redux. But this time I wanted to manage the global state in a simpler and clearer way just using React hooks. I decided to go with a simple useReducer combined with theuseContextSelector hook which will avoid the whole application’s re-render caused by the native useContext hook.
-
Honestly, what is the best, pain-free state management in React right now?
To be clear: this is not a made up problem. There is a React RFC on the topic since June 2019, there is an experimental PR to the React codebase for this since January 2021. There are external packages like use-context-selector to work around it. As of today, there is no efficient way of partially subscribing to context value changes that is a native part of React.
- First time setting up a greenfield project professionally. Any caveats?
zustand
-
Get out of state management hell with automatic revalidation
You add the current user state to a React Context or state management library, read from it on the top bar, and write to it after a user signs in. Done. No big deal, right?
-
Redux 101
Zustand
-
React State Management in 2024
Reducer-based: requires dispatching actions to update a big centralised state, often called a “single source of truth”. In this group, we have Redux and Zustand.
- Como iniciar zustand de un server page al client en NextJs
-
HTML Data Attributes: One of the Original State Management Libraries
DEV is a Rails monolith, which uses Preact in the front-end using islands architecture. The reason why I mention all this is that it's not a full-stack JavaScript application, and there is no state management library like Redux or Zustand in use. The data store, for the most part on the front end, is all data attributes.
-
State Management Alternatives: Best Tools for React Apps
Zustand on GitHub
-
React State Management Basics
Maybe you heard about Redux, Zustand or MobX. All of them are state management libraires for React. But why would you even need one? And should you learn one now?
-
React Ecosystem in 2024
Demo: Zustand Demo
-
Angular vs. React vs. Vue.js: Comparing performance
Zustand: A lightweight alternative to popular state management solutions like Redux and MobX. It eliminates the complexities of state management by providing a minimal API that doesn’t require tons of boilerplate code. Its bundle size is 3kb minified and 1.1kb gzipped
-
🚀 Dominate React Project Startups: Insider Tips for Dev Success! 🤓
Zustand 🏗️
What are some alternatives?
redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
redux - Predictable state container for JavaScript apps
react-query - 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]
MobX - Simple, scalable state management.
Recoil - Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
redux-devtools-extension - Redux DevTools extension.
SWR - React Hooks for Data Fetching
react-hook-form - 📋 React Hooks for form state management and validation (Web + React Native)
rtk-query - Data fetching and caching addon for Redux Toolkit
jotai - 👻 Primitive and flexible state management for React
valtio - 💊 Valtio makes proxy-state simple for React and Vanilla
bloc - A predictable state management library that helps implement the BLoC design pattern