Menu

gitpiper

useDefault react Code Snippet in 2024

hooksstateintermediate

Last Updated: 4 December 2024

Creates a stateful value with a default fallback if it's null or undefined, and a function to update it.

  • Use the useState() hook to create stateful value.
  • Check if the value is either null or undefined.
  • Return the defaultState if it is, otherwise return the actual value state, alongside the setValue function.
const useDefault = (defaultState, initialState) => { const [value, setValue] = React.useState(initialState); const isValueEmpty = value === undefined || value === null; return [isValueEmpty ? defaultState : value, setValue]; };
const UserCard = () => { const [user, setUser] = useDefault({ name: 'Adam' }, { name: 'John' }); return ( <> <div>User: {user.name}</div> <input onChange={e => setUser({ name: e.target.value })} /> <button onClick={() => setUser(null)}>Clear</button> </> ); }; ReactDOM.render(<UserCard />, document.getElementById('root'));

react snippet similar to useDefault For You in December 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! ✌️