use-context-selector
bulletproof-react
use-context-selector | bulletproof-react | |
---|---|---|
27 | 250 | |
2,481 | 22,853 | |
- | - | |
6.5 | 5.0 | |
about 8 hours ago | 1 day 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?
-
Tips for managing and organizing complex state with React context
you can always split out context state or use a library to help with rerender issues like https://github.com/dai-shi/use-context-selector, or just switch to jotai or something else if you want something more ergonomic or better design patterns.
-
ReactJs - Useless re-renders when a context changes - HOW TO SOLVE IT ?
If you don't want to swap out useContext, you could always use useContextSelector, which helps you limit what props in the context should rerender the component.
-
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.
bulletproof-react
-
Coding Snippets Dev Log (9/27/23)
Using -> this guide to help structure a project in a better way
-
Best File Structure
bulletproof react
-
Beware of teammates who refactor code based on personal taste without proper documentation or completeness. Sounds familiar.
Well Iād definitely have a file structure in place. I use bullet proof react as my go to. But I mean likeā¦Iād say thereās probably 10 things causing 90% of the problems. So things like folder structure, yes, but also how long the files are, I meanā¦how enmeshed it all isā¦maybe the naming conventions.
-
My React Beginner Project
Follow this: https://github.com/alan2207/bulletproof-react
-
What's the best component / folder architecture for a project to scale?
Your approach is similar to bulletproof-react, which I personally love. I have built projects of all sizes with it and the DX was always nice! Check it out if you want and good luck on your project š
-
Are there any react js best practices websites?
Link for the lazy ones.
-
Inspiration for my first React project
Not sure if this helps, but Bulletproof React is a very good architecture to React projects of any size. Maybe it can give you some insight on how to structure your project. Good luck!
- Software Architecture in React
- Software Architecture in frontend
-
Best practices for organizing projects files in react
Been content with how Bulletproof react does it, only thing missing for me is differentiation between views and components.
What are some alternatives?
zustand - š» Bear necessities for state management in React
react-clean-architecture - A realistic approach to implement clean architecture on react codebases
reselect - Selector library for Redux
documentation - š° Architectural design methodology for Frontend projects
Next.js - The React Framework
excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams
react-tracked - State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others.
redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
formik - Build forms in React, without the tears š [Moved to: https://github.com/jaredpalmer/formik]
payload - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.
why-did-you-render - why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
SAAS-Starter-Kit-Pro - šA boilerplate for building Software-as-Service (SAAS) apps with Reactjs, and Nodejs