News for hackers. Stuff that matters.
Re:Advice on JSX Conditionals by phailhaus on Wednesday March 09, 2022 @11:57AM (#30616808)
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.
Re:Advice on JSX Conditionals by 9wzYQbTYsAIc on Wednesday March 09, 2022 @12:05PM (#30616947)
The React maintainers did put a lot of effort into making hooks. The variety of hooks seem to cover all the use cases for programming.
Re:Advice on JSX Conditionals by heyparkerj on Wednesday March 09, 2022 @01:08PM (#30617933)
I'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).
Re:Advice on JSX Conditionals by phailhaus on Wednesday March 09, 2022 @01:18PM (#30618056)
If 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.
Re:Advice on JSX Conditionals by heyparkerj on Wednesday March 09, 2022 @01:31PM (#30618231)
Typically 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.
Re:Advice on JSX Conditionals by phailhaus on Wednesday March 09, 2022 @03:57PM (#30619840)
Oh gotcha, I thought this was a function that was defined outside of the component.