Rendering function vs variable assignment

Hey everyone, I'm wondering if anyone knows whether there's a difference between having a rendering function and variable assignment. To have a better understanding of problem imagine a scenario where depending on some value You need to render an icon. You create a map where keys are the values and keys' values are icons. This can be done in two ways. First with variable assignment:
const map: Record<string, ReactNode> = {
success: <SuccessIcon />
error: <ErrorIcon />
}
const Status = (props) => <>{map[props.status]}</>
const map: Record<string, ReactNode> = {
success: <SuccessIcon />
error: <ErrorIcon />
}
const Status = (props) => <>{map[props.status]}</>
And second with rendering functions:
const map: Record<string, () => JSX.Element> = {
success: () => <SuccessIcon />
error: () => <ErrorIcon />
}
const Status = (props) => {
const Icon = map[props.status]
return (
<Icon />
)
}
const map: Record<string, () => JSX.Element> = {
success: () => <SuccessIcon />
error: () => <ErrorIcon />
}
const Status = (props) => {
const Icon = map[props.status]
return (
<Icon />
)
}
Does anyone know whether there's a benefit or some loss to any of these approaches (maybe bigger build size but quicker runtime or other way round)? Or maybe there's another, more proper way of doing this? Thanks!
9 Replies
barry
barry2y ago
I don't even think the first one works
maxtreme
maxtreme2y ago
It does somehow
barry
barry2y ago
This is the only difference I can find
barry
barry2y ago
barry
barry2y ago
TLDR it's irrelevant
maxtreme
maxtreme2y ago
Yeah, thought so. Thanks!!
jingleberry
jingleberry2y ago
It is very relevant. You are redefining actual React components if you do this:
const Icon = map[foo] // () => <div/>
return (
<div>
<Icon />
</div>
)
const Icon = map[foo] // () => <div/>
return (
<div>
<Icon />
</div>
)
It is perfectly fine though to treat it as just a normal function can call it in your JSX though:
const icon = map[foo]
return (
<div>
{icon()}
</div>
)
const icon = map[foo]
return (
<div>
{icon()}
</div>
)
In your example its not so egregious. But if you did have React state and other hooks then you'll encounter weird behaviours as state will no longer persist between renders Read more: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md
GitHub
eslint-plugin-react/no-unstable-nested-components.md at master · js...
React-specific linting rules for ESLint. Contribute to jsx-eslint/eslint-plugin-react development by creating an account on GitHub.
jingleberry
jingleberry2y ago
And if its not a function in the map then just doing {icon} also works in your JSX too
barry
barry2y ago
I don’t really agree, we are dealing with SVG’s here, but yeah if the components had state you’d end up with “super components” which can lead to unexpected behavior
Want results from more Discord servers?
Add your server