Avoiding re-renders in React

@unwind/class-name allows your components to accept more complex value types than a simple string. React does a shallow compare when deciding whether to update components wrapped with memo().

To avoid unnecessary re-renders due to className prop accepts types of values other than simple string type, make sure the value is referentially stable.

Here are some of the options to mitigate re-rendering components:

Define values outside of the function component body unless the value depends on props (or internal state).
Memoize value inside the function body when it depends on the props (or internal state).

Example

In this example we define functional component Box. We can define boxClassName (the component's class name value) outside of the functional component (render block).

caution

Make sure the styles you create a are referentially stable too also when defining components.

Live Editor

// Box.tsx
import type { ClassNameProp } from '@unwind/class-name'
import { defineClassName, resolveClassName } from '@unwind/class-name'
import { memo, PropsWithChildren } from 'react'

// 👇 Defining outside of the functional component body ensures referential stability
const boxClassName = defineClassName(({ selected }: { selected: boolean }) => [
  'px-4 py-3 border border-gray-300 rounded text-center',
  selected ? 'ring-2 ring-indigo-500 ring-offset-2' : null,
])

type BoxProps = PropsWithChildren<{
  selected?: boolean
  className?: ClassNameProp<typeof boxClassName>
}>

const Box = memo<BoxProps>(({ selected, className, children }) => (
  <div className={resolveClassName({ selected }, boxClassName, className)}>
    {children}
  </div>
))
Box.displayName = 'Box'

// App.tsx
function App() {
  return (
    <Box selected className="bg-white">
      Box content
    </Box>
  )
}

// Box.tsx
import type { ClassNameProp } from '@unwind/class-name'
import { defineClassName, resolveClassName } from '@unwind/class-name'
import { memo, PropsWithChildren } from 'react'

// 👇 Defining outside of the functional component body ensures referential stability
const boxClassName = defineClassName(({ selected }: { selected: boolean }) => [
  'px-4 py-3 border border-gray-300 rounded text-center',
  selected ? 'ring-2 ring-indigo-500 ring-offset-2' : null,
])

type BoxProps = PropsWithChildren<{
  selected?: boolean
  className?: ClassNameProp<typeof boxClassName>
}>

const Box = memo<BoxProps>(({ selected, className, children }) => (
  <div className={resolveClassName({ selected }, boxClassName, className)}>
    {children}
  </div>
))
Box.displayName = 'Box'

// App.tsx
function App() {
  return (
    <Box selected className="bg-white">
      Box content
    </Box>
  )
}

Result

tip

We can also omit the second parameter of the ClassNameCallback since it uses an HTMLDivElement element because its className prop accepts only a string | undefined.

Omitting the previously generated class selectors would effectively remove every generated selector if we'd wrapped another unwind component instead of the HTMLDivElement.

1. Outside of the function component body

Live Editor

// Box.tsx
import type { ClassNameProp } from '@unwind/class-name'
import { defineClassName, resolveClassName } from '@unwind/class-name'
import { memo, PropsWithChildren } from 'react'

// 👇 Defining outside of the functional component body ensures referential stability
const boxClassName = defineClassName(({ selected }: { selected: boolean }) => [
  'px-4 py-3 border border-gray-300 rounded text-center',
  selected ? 'ring-2 ring-indigo-500 ring-offset-2' : null,
])

type BoxProps = PropsWithChildren<{
  selected?: boolean
  className?: ClassNameProp<typeof boxClassName>
}>

const Box = memo<BoxProps>(({ selected, className, children }) => (
  <div className={resolveClassName({ selected }, boxClassName, className)}>
    {children}
  </div>
))
Box.displayName = 'Box'

// MyWrapperComponent.tsx

// 👇 Defining outside of the functional component body ensures referential stability
const override = defineClassName(({ selected }, previous) => [
  ...previous.filter(selector => !selector.startsWith('ring-')),
  'bg-amber-400',
  selected ? 'ring-2 ring-amber-500 ring-offset-2' : null,
])

const MyWrapperComponent = memo(() => (
  <Box selected className={override}>
    Box content
  </Box>
))

// App.tsx
function App() {
  return (
    <MyWrapperComponent />
  )
}

// Box.tsx
import type { ClassNameProp } from '@unwind/class-name'
import { defineClassName, resolveClassName } from '@unwind/class-name'
import { memo, PropsWithChildren } from 'react'

// 👇 Defining outside of the functional component body ensures referential stability
const boxClassName = defineClassName(({ selected }: { selected: boolean }) => [
  'px-4 py-3 border border-gray-300 rounded text-center',
  selected ? 'ring-2 ring-indigo-500 ring-offset-2' : null,
])

type BoxProps = PropsWithChildren<{
  selected?: boolean
  className?: ClassNameProp<typeof boxClassName>
}>

const Box = memo<BoxProps>(({ selected, className, children }) => (
  <div className={resolveClassName({ selected }, boxClassName, className)}>
    {children}
  </div>
))
Box.displayName = 'Box'

// MyWrapperComponent.tsx

// 👇 Defining outside of the functional component body ensures referential stability
const override = defineClassName(({ selected }, previous) => [
  ...previous.filter(selector => !selector.startsWith('ring-')),
  'bg-amber-400',
  selected ? 'ring-2 ring-amber-500 ring-offset-2' : null,
])

const MyWrapperComponent = memo(() => (
  <Box selected className={override}>
    Box content
  </Box>
))

// App.tsx
function App() {
  return (
    <MyWrapperComponent />
  )
}

Result

2. Memoize value within the render method

useMemo() to memoize arrays and objects;
useCallback() to memoize callbacks.

Live Editor

// Box.tsx
import type { ClassNameProp } from '@unwind/class-name'
import { defineClassName, resolveClassName } from '@unwind/class-name'
import { memo, PropsWithChildren } from 'react'

// 👇 Defining outside of the functional component body ensures referential stability
const boxClassName = defineClassName(({ selected }: { selected: boolean }) => [
  'px-4 py-3 border border-gray-300 rounded text-center',
  selected ? 'ring-2 ring-indigo-500 ring-offset-2' : null,
])

type BoxProps = PropsWithChildren<{
  selected?: boolean
  className?: ClassNameProp<typeof boxClassName>
}>

const Box = memo<BoxProps>(({ selected, className, children }) => (
  <div className={resolveClassName({ selected }, boxClassName, className)}>
    {children}
  </div>
))
Box.displayName = 'Box'

// MyWrapperComponent.tsx
const MyWrapperComponent = memo(({ color = 'amber' }) => {
  // 👇 Using useMemo() ensures referential stability across the renders
  const override = useMemo(() => defineClassName(({ selected }, previous) => [
    ...previous.filter(selector => !selector.startsWith('ring-')),
    `bg-${color}-400`,
    selected ? `ring-2 ring-${color}-500 ring-offset-2` : null,
  ]), [color])

  return (
    <Box selected className={override}>
      Box content
    </Box>
  )
})

// App.tsx
function App() {
  return (
    <MyWrapperComponent color="lime" />
  )
}

// Box.tsx
import type { ClassNameProp } from '@unwind/class-name'
import { defineClassName, resolveClassName } from '@unwind/class-name'
import { memo, PropsWithChildren } from 'react'

// 👇 Defining outside of the functional component body ensures referential stability
const boxClassName = defineClassName(({ selected }: { selected: boolean }) => [
  'px-4 py-3 border border-gray-300 rounded text-center',
  selected ? 'ring-2 ring-indigo-500 ring-offset-2' : null,
])

type BoxProps = PropsWithChildren<{
  selected?: boolean
  className?: ClassNameProp<typeof boxClassName>
}>

const Box = memo<BoxProps>(({ selected, className, children }) => (
  <div className={resolveClassName({ selected }, boxClassName, className)}>
    {children}
  </div>
))
Box.displayName = 'Box'

// MyWrapperComponent.tsx
const MyWrapperComponent = memo(({ color = 'amber' }) => {
  // 👇 Using useMemo() ensures referential stability across the renders
  const override = useMemo(() => defineClassName(({ selected }, previous) => [
    ...previous.filter(selector => !selector.startsWith('ring-')),
    `bg-${color}-400`,
    selected ? `ring-2 ring-${color}-500 ring-offset-2` : null,
  ]), [color])

  return (
    <Box selected className={override}>
      Box content
    </Box>
  )
})

// App.tsx
function App() {
  return (
    <MyWrapperComponent color="lime" />
  )
}

Result

Avoiding re-renders in React

Example​

1. Outside of the function component body​

2. Memoize value within the render method​

Example

1. Outside of the function component body

2. Memoize value within the render method