Skip to content

Instantly share code, notes, and snippets.

@markerikson
Last active January 1, 2024 06:20
Show Gist options
  • Save markerikson/47fff93c92286db72b22bab5b02e2da3 to your computer and use it in GitHub Desktop.
Save markerikson/47fff93c92286db72b22bab5b02e2da3 to your computer and use it in GitHub Desktop.
React render function organization
// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
// My basic render function structure:
function RenderLogicExample({
someBoolean, // 1) Destructure values from `props` object
someList,
}) {
// 2) Declare state values
const [a, setA] = useState(0);
const [b, setB] = useState(0);
// 3) Render any dependent items into temporary variables,
// such as conditional components or lists
const conditionalComponent = someBoolean ? (
<SomeConditionalComponent />
) : null;
const listItems = someList.map(item => (
<ListItem key={item.id} item={item} />
));
// 4) Use a single JSX structure filled with content
return (
<div>
<div>
A: {a}, B: {b}
</div>
{conditionalComponent}
{listItems}
</div>
);
}
@emadbaqeri
Copy link

awesome, as a self-taught developer I'm always hesitating on simple things that I already know and do. Just reading codes from pros make me more confident about my thoughts and the style of the code I write, so much appreciated 💯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment