Plus if you want to reuse it with different key, you would have to multiply your functions, rename them, etc. What’s in the video is an example of something that shouldn’t be a custom hook, just exported function. They are also reusable.

I still favor the object returning because I like aliasing things that way. With arrays you can very easily mix up the order. But ideally, you'd actually make the key part of the functions, so you would only need one hook!

better a hook, to re-use it easily and also allow it to have state or other hooks inside

And what if you want to mutate more than one key ? You should call the hook again? Isnt it better if the functions receive key and value ?

Do u have a course , I would like to check it if it is in my budget :)

It's a css framework called Tailwind.

Tailwind!

so you didn't have to always pass the key to every function

yeah, you can add an event listener to the 'storage' event to receive updates when things change!

@@cosdensolutions Also, you can use a useEffect hook

nope, because they are named and it's an object!

Thank you!

😉

not necessarily. This is designed to be a custom hook, even without state. Doing it this way makes it super easy to add state later on or callbacks. If you did it in a helper function, you'd have to convert it to a hook later on anws if you wanted those things

@@cosdensolutions great great! Thanks for the reply!

it is not a requirement to use a React Hook inside a custom hook. Custom hooks can be used to encapsulate any type of logic, including stateful logic, imperative logic, and even other custom hooks. However, it is common to use React Hooks inside of custom hooks in order to reuse stateful logic across multiple components.

React doesn't by default check for changes in localStorage. As far as it's concerned, nothing changed so it doesn't need to re-render. That's why it works only on reload, because that's when React will render again

@@cosdensolutions Thanks, keep up the good work

yes, you could change the hook to accomodate that without a problem! This was specifically just for one key to keep it simple, but definitely !

It just makes it easier to handle the try catch blocks and exposes an easier api for it that is re-usable. You could also easily add additional logic to have state or effects in that hook

I don't find anything useful in the code presented until like you said, any additional logic or state implementation for realtime rendering of the localstorage data. const { getItem: getUserItem, setItem: setUserItem, removeItem: removeUserItem } = useLocalStorage('user'); const { getItem: getTokenItem, setTokenItem, removeItem: removeTokenItem } = useLocalStorage('token'); const somethingElse = useLocalStorage('something-else'); somethingElse.getItem(); // ... somethingElse.setItem(); // ... somethingElse.removeItem(); // ... // VS localStorage.setItem('foo', 'value1'); const foo = localStorage.getItem('foo'); localStorage.removeItem('foo'); try { localStorage.setItem('user', JSON.stringify(loggedInUser)) } catch (error) { } Here built-in localStorage API looks much more easier to use and the useLocalStorage hook you suggested looks just a lot more complicated to use. Unless you add any advantages than the existing localStorage APIs, like, again, the use of states that maps to localStorage, which can then be used to show localStorage data live updating in the components, this hooks looks pretty unnecessary. @@cosdensolutions

yeah that can also work, you could also use the hook multiple times for different keys too, but yeah it's probably better to then make the changes to a hook that accommodates multiple keys

have video on it! called my vscode setup

This video is kept simple, but if you were to add state or effects inside, this is much better as a hook

@@cosdensolutionsmaking it a hook just limits where it can be used. Make it a function then if theres a need for it to be a hook create one

Here are some examples of when you might want to use a custom hook without using any React Hooks inside of it: - To encapsulate imperative logic, such as making API calls or interacting with DOM elements. - To reuse a pattern or algorithm that doesn't involve state management. - To create a custom hook that is simply a wrapper for another function.

Because you would want to extend this further with some state and effects. This is just the simple version. This should always be a hook, helper functions are something else

Thanks for the answer@@cosdensolutions

this is the base version of it, you can add state and effects inside easily, that's the goal! This is a hook