Memo

memo is a higher-order component that's used for optimizing the performance of components by preventing unnecessary re-renders. When a parent component re-renders, an identity check is performed for each of the props passed. If none have changed, it will not re-render. You can override this behavior by passing a different compare function.

Example

import { memo } from "kaioken"

const MemoizedUserAvatar = memo(({ name, avatarUrl }) => {
  // Component logic here
  return (
    <div className="user-avatar">
      <img src={avatarUrl} alt={`${name}'s avatar`} />
      <span>{name}</span>
    </div>
  )
})

Specifying a custom compare function

import { memo } from "kaioken"

const MemoizedUserAvatar = memo(
  ({ user }) => {
    // Component logic here
    return (
      <div className="user-avatar">
        <img src={user.avatarUrl} alt={`${user.name}'s avatar`} />
        <span>{user.name}</span>
      </div>
    )
  },
  (prevProps, nextProps) =>
    prevProps.user.name === nextProps.user.name &&
    prevProps.user.avatarUrl === nextProps.user.avatarUrl
)