3 ms·
When logic gets more complicated than a single ternary (e.g., handling pending/error/result state), I've found that a `useMemo` gives me the flexibility I need.
by phailhaus 5y ago
When logic gets more complicated than a single ternary (e.g., handling pending/error/result state), I've found that a `useMemo` gives me the flexibility I need. It also keeps the messy logic out of the final JSX, which tends to make it read better.
- 9wzYQbTYsAIc 5y agoThe React maintainers did put a lot of effort into making hooks. The variety of hooks seem to cover all the use cases for programming.
- heyparkerj 5y agoI've personally rarely even needed to useMemo, I just write a function that returns the JSX I need and { myFunction() } in the functional component's return (given React).
- phailhaus 5y agoIf you're using Typescript that can get a bit annoying, since you'll also need to pass in whatever props necessary for the function to handle the logic + type them. Makes it nice and easy to test in isolation though.
- heyparkerj 5y agoTypically the function has access to whatever props or state it needs because it's in the scope of the component. It's not pure, but it's rare that I need to verbosely pass props into the function call and then accept them in myFunction. I don't typically test these functions in isolation as the component itself is pure and I test the output of the component as a whole instead.
- phailhaus 5y agoOh gotcha, I thought this was a function that was defined outside of the component.