Skip to content

Instantly share code, notes, and snippets.

@markerikson
Last active January 1, 2024 06:20
Show Gist options
  • Star 114 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • 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>
);
}
@ZanshinPost
Copy link

Nice.
minor remark, I would add index to the listitem

@medv
Copy link

medv commented Jun 25, 2018

Defining a named function or variable in the render function is no different to just running the map directly in the render function. You are still declaring a new function every time render fires. Declaring it on the class, or outside of the functional component will use an existing reference to the function and improve performance in some cases, although not required for faster prototyping until an optimization step (if at all needed).

Adding index to listitem is an anti-pattern that will create mysterious problems down the track (unless you are familiar with these problems, in which case you already know to protect against it). Instead, the key should be set to a consistent value derived from the mapped items (ID, or a concatenated string of one/two string fields that appear in the object guaranteed to be stable/unique in this set of data).

https://codeburst.io/how-to-not-react-common-anti-patterns-and-gotchas-in-react-40141fe0dcd

@hsavit1
Copy link

hsavit1 commented Sep 24, 2018

so no render props ?

@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