3 ms·
Refactored the ugly JSX code to be neat JSX. function Component({ children }) { const { data, loading, error } = useGetMyData(); return (
by tiborsaas 5y ago
Refactored the ugly JSX code to be neat JSX.
function Component({ children }) {
const { data, loading, error } = useGetMyData();
return (
<>
{loading && <div>Loading...</div>}
{error && <div className="red">{error.message}</div>}
{!loading && !error && <>
<div>Data:</div>
<div className="green">{data}</div>
{children}
</>}
</>
);
}
> However, HTML is too declarative of an S-expression to be efficient in constructing the DOM.
This is statement is also stinking. HTML is meant to describe the DOM and does a great job at it.
- rjerue 5y agoThe example is meant to be largely trivial. What if there were 50 cases I wanted to render. On another note, I'd suggest ternaries with explicit null returns. Just need to get burned by it once to have it engrained! https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx https://kentcdodds.com/blog/use-ternaries-rather-than-and-an...
- tiborsaas 5y agoMy point was that the author could have presented a much better JSX code for better comparison. I assume it's not intentionally made worse to make the Clojure version look simpler and better, but it felt like a TV shop commercial with the black and white "lame people" :) What ifs are what ifs ;) Fair point on the ternaries, I use that too when it makes sense.