Menu

gitpiper

useGetSet react Code Snippet in 2024

hooksstateintermediate

Last Updated: 22 March 2024

Creates a stateful value, returning a getter and a setter function.

  • Use the useRef() hook to create a ref that holds the stateful value, initializing it with initialState.
  • Use the useReducer() hook that creates a new object every time it's updated and return its dispatch.
  • Use the useMemo() hook to memoize a pair of functions. The first one will return the current value of the state ref and the second one will update it and force a re-render.
const useGetSet = initialState => { const state = React.useRef(initialState); const [, update] = React.useReducer(() => ({})); return React.useMemo( () => [ () => state.current, newState => { state.current = newState; update(); }, ], [] ); };
const Counter = () => { const [getCount, setCount] = useGetSet(0); const onClick = () => { setTimeout(() => { setCount(getCount() + 1); }, 1_000); }; return <button onClick={onClick}>Count: {getCount()}</button>; }; ReactDOM.render(<Counter />, document.getElementById('root'));

react snippet similar to useGetSet For You in March 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️