Comments (7)
Could this be implemented via a hook that allows a custom comparator function to be used for state updates? It looks like useState
already avoids re-renders for shallowly equal updates, we would just need to expand the concept of what an "equal" update is.
// using default useState comparator
const [ state, setState ] = useDistinctState('a')
setState('A') // will update
...
// using a custom comparator
const [ state, setState ] = useDistinctState('a',
(prev, next) => prev.toUpperCase() === next.toUpperCase()
)
setState('A') // won't update
...
// solving issue use case
function usePureState (initialValue) {
return useDistinctState(initialValue, shallowEqual)
}
(I just came from reading #92 so that's part of my consideration here.)
from react-use.
react-fast-compare
does deep compare, as I understand, not shallow.
from react-use.
Do you mean it would not re-render if props didn't change?
from react-use.
Could react-fast-compare
help here ?
from react-use.
I mean that if use useState with object like this.setState, it would be great to skip update using shallow compare of object values like that
function Component() {
const [state, setState] = usePureState({ a: 1, b: 2 })
// skip update
setState({ a: 1 }) // merges automatically
// updates
setState({ a: 2})
}
from react-use.
Yeah, sounds like something useful. I guess, could be easy to do, too, just with just a single loop that shallow-checks all values.
from react-use.
This is how React do shallowEquals:
https://github.com/facebook/react/blob/master/packages/shared/shallowEqual.js
I would hope that usePureState could get included as a built-in hook. Saves us all re-implementing (read copy-pasting) the above comparator.
from react-use.
Related Issues (20)
- What's the meaning of useSlider's prop 'styles' with the type CSSProperties
- Request: replace keyboardjs dependency with keystrokes (updated lib) HOT 1
- `useLocalStorage` not working with updater function HOT 1
- useVideo.story.tsx - sampleVideo can not be loaded HOT 3
- How to make clicking some elements an exception for useClickAway hook
- Add a reset history method to useStateWithHistory
- Install hooks seperate from each other HOT 2
- UseKeyPressEvent doesn't work when non-english language is set HOT 1
- useMeasure dimensions out of sync in react18 HOT 2
- Please add a list of valid keys to https://github.com/streamich/react-use/blob/master/docs/useKey.md
- useMedia deprecated methods HOT 1
- There is deprecated dependency in your nano-css HOT 1
- useWindowSize does not work on App Router (nextjs) HOT 1
- useCopyToClipboard: accept options object to pass to copy-to-clipboard HOT 2
- useCopyToClipboard: accept options object to pass to copy-to-clipboard
- [question]: How can I combine useMeasure with useHoverDirty HOT 1
- useLocalStorage doesn't not remove key on setValue(undefined) HOT 1
- useLocalStorage documentation: warn against calling with same key in multiple components HOT 1
- useLocalStorage without 'or undefined' HOT 2
- Breaking rules of hooks leads to incorrect behaviour in useLocalStorage
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 react-use.