9 replies

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!

TTC

Theo's Typesafe Cult•3y ago•

9 replies

maxtreme

Rendering function vs 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 />
  )
}

Rendering function vs variable assignment

Similar Threads

Rendering function vs variable assignment

Similar Threads

Similar Threads

Similar Threads