Memo

Memo is a higher-order component that's used for optimizing the performance of components by preventing unnecessary re-renders. By default it will perform an identity check for the props passed. If the props don't change, it will not re-render. You can override this behavior by passing a different compare function.

Example

import { memo } from "kaioken"

const MyComponent = memo(({ value }) => {
  // Component logic here
  return <div>{value}</div>
})

Specifying a custom compare function

import { memo } from "kaioken"

const MyComponent = memo(
  ({ value }) => {
    // Component logic here
    return <div>{value}</div>
  },
  (prevProps, nextProps) => prevProps.value === nextProps.value
)