Comments (3)
Found a solution using useEffect.
from unstated-next.
This is standard react hooks behavior — your count
variable is closed-over when creating your decrement
behavior. In this case you probably want to use the reducer form of setState
or just use useReducer
directly.
You'll also want to wrap those callbacks in useCallback
to avoid unnecessary re-renders.
function useCounter(initialState = 0) {
const [count, setCount] = useState(initialState)
const decrement = useCallback(() => setCount(count => count + 1), [])
const increment = useCallback(() => setCount(count => count + 1), [])
return { count, decrement, increment }
}
from unstated-next.
The answer by @shrugs should be added to the official documentation. I think there are also cases where decrement
and increment
should just have their own context, without count
. That's similar to how useReducer is recommended with context.
https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down
from unstated-next.
Related Issues (20)
- Use a published library - Error: Component must be wrapped with <Container.Provider> HOT 1
- Translate to Portuguese
- Important React.memo tip
- Can selectors be supported? HOT 4
- Unstated-next with Next.js and SSR HOT 1
- Can I use unstated-next to store non-serializable data? HOT 1
- TypeError: useHook is not a function with Next.js HOT 1
- Reusable functions that leverage Containers outside components HOT 1
- Error: Component must be wrapped with <Container.Provider> HOT 9
- Interdependent containers and asynchronous operations HOT 3
- Can't compose containers manually? HOT 6
- Could you add something so that you can use the provider and the context in the same component? Maybe add an HOC like withContainer()? HOT 3
- Ideas for covering more use cases HOT 1
- all containers on the top level of my react application
- Why Unstated? HOT 2
- How to produce types for Containers?
- Testing UI using unstated-next
- [Question] How to use addEventListener in unstated-next
- Reducing re-renders useCallback optimization should use functional updates
- Container.useContainer() vs useContainer(Container)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from unstated-next.