Comments (12)
@ilovedesert001 Every time, the state
is a new point(object)
https://codesandbox.io/s/zl1wjo69qx
from react-use.
and this works fine
const useSetState = <T extends object> (initialState: T = {} as any): [T, (patch: Function | Partial<T>) => void] => {
const [state, set] = useState(initialState)
const setState = (patch) => {
if (patch instanceof Function) {
set((prevState) => {
return Object.assign({}, state, patch(prevState))
})
} else {
const newState = Object.assign({}, state, patch)
set(newState)
}
}
return [state, setState]
}
from react-use.
Thanks for reporting this! Should be fixed now.
from react-use.
it seems still some bugs ...
maybe the better way
typescript
export const useSetState = <T extends object> (initialState: T = {} as any): [T, (patch: Function | Partial<T>) => void] => {
const [tick,setTick] = useState(true)
const [state, set] = useState<T>(initialState);
const setState = patch => {
if (patch instanceof Function) set(prevState => Object.assign(prevState, patch(prevState)));
else set(Object.assign(state, patch));
setTick(!tick)
};
return [state, setState];
}
from react-use.
and this works fine
const useSetState = <T extends object> (initialState: T = {} as any): [T, (patch: Function | Partial<T>) => void] => { const [state, set] = useState(initialState) const setState = (patch) => { if (patch instanceof Function) { set((prevState) => { return Object.assign({}, state, patch(prevState)) }) } else { const newState = Object.assign({}, state, patch) set(newState) } } return [state, setState] }
This will cause problems when Passing state (Object) to child Components
from react-use.
This will cause problems when Passing state (Object) to child Components
@ilovedesert001 Can you give an example? Is it because child components mutate the state object?
from react-use.
check out these
from react-use.
@ilovedesert001 Why do you use useRef
, The returned object will persist for the full lifetime of the component. So a subsequent change is invalid. demo1
is expected, because you assign the patch to state, not create a new object. In fact the state point still has not changed
.
.
So in fact there is no need to use the ref
work fine demo
from react-use.
@likun7981
In my case , I don't want to change state point (Or state Object), just need change state property to cause rerender.
@streamich
Q:Is useSetState designed to change the state point (replaced by new state object), or persist state object for the full lifetime of the component ?
from react-use.
@likun7981 I think this should be ti.
from react-use.
@likun7981 I think this should be ti.
These two problems is no relationship
from react-use.
@likun7981 OK, sry.
from react-use.
Related Issues (20)
- build size > 100k? make items importable from own file? HOT 1
- useMeasure: React18 Support (Suspense boundary breaks when using the hook) HOT 3
- 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
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.