5 ms·
Lovely page layout. Feels like an overly long game though :) I was scared by "50 custom hooks": why is that a good thing? (honest question). It seems daunting
by beders 4y ago
Lovely page layout.
Feels like an overly long game though :)
I was scared by "50 custom hooks": why is that a good thing? (honest question).
It seems daunting to have to learn when and why you'd use them.
- benatkin 4y agoHere they are: https://usehooks.com/ https://usehooks.com/
- Xeoncross 4y agoHooks and components are just functions, a large react codebase has hundreds of functions. Things like HTTP requests and reading from localstorage are good candidates for custom hooks.
- hakanderyal 4y agoOnce you start using React for some time, the benefits of these hooks becomes obvious. Think of them as small utilities, like lodash, or standard lib. Reusable snippets of code that you occasionally need.
- ricardobeat 4y ago"Reusable" within very limited scopes. Every React project ends up with tons of custom hooks that are only used in one or two places. I don't think they can be compared to generic utilities like that.
- hakanderyal 4y agoYou are right, I was talking about useHooks project specifically, which includes utility hooks like useDebounce, useLocalStorage etc.
- iudqnolq 4y agoYou're learning how to build them, not just how to use them. The selling point of react hooks is that they're much easier to compose than class methods. The idea is you can easily build your own custom ones that are thin wrappers around one or more of the builtin ones. This course is presumably walking you through building 50 high-quality hooks so that you're prepared to build your own. For example, one of the 50 is useFirestoreQuery. Understanding how to build that presumably prepares you to learn how to write useMyCorpNotificationMechanism. A lot of their 50 are trivial but handy. For example const useToggle = (initialState = false) => { const [state, setState] = useState(initialState); const toggle = useCallback(() => setState(state => !state), []); return [state, toggle] }
- ricardobeat 4y agoDon't forget the mandatory destructuring on the other side const [state, toggle] = useToggle() otherwise you'll end up causing unnecessary re-renders. Happens too often on hooks returning objects. You can also memoize the whole hook. I miss classes sometimes.