Add helper to wrap state from other hooks? about use-immer HOT 4 CLOSED

@ianstormtaylor I think I get what you are getting at. I think the first solution is nicer, the second one looks incorrect, as immer wouldn't receive the new user after an update.

However, I think this is a simpler solution that doesn't need new api's:

import {produce} from immer

function Example() {
  const [user, _setUser] = useLocalStorage('user')
  const updateUser = useMemo(() => produce(_setUser), [])
  
  updateUser(user => {
    user.name = 'New Name'
  })
}

from use-immer.

An alternative way to handle this nicely would be to allow useImmer to take a second argument that is a callback called whenever the update happens. Which would allow you to write the same example as:

function Example() {
  const [user, setUser] = useLocalStorage('user')
  const [, updateUser] = useImmer(user, setUser)
  
  updateUser(user => {
    user.name = 'New Name'
  })
}

I think this is actually more flexible, so this would be the better solution.

from use-immer.

Hi Ian,

Can you please update the Example component, I am not able to figure out what this component intends to do, and that will also help get more clarity about your issue.

Thank you

from use-immer.

@mweststrate How would you implement such a thing using reducer?

Edit - I have managed to do so with useEffect:

export function useCart() {
  const [storageCart, setStorageCart] = useLocalStorage("cart", initalCart);
  const [cart, dispatch] = useImmerReducer<Cart>(reducer, storageCart);

  React.useEffect(() => {
    setStorageCart(cart);
  }, [cart, setStorageCart]);

  return [cart, dispatch] as const;
}

from use-immer.