pool-office-manager-test

react-test

import React from "react";
const ALL_NAMES = ["foo", "bar", "baz"];

interface NameListItemProps {
  readonly name: string;
  readonly onNameClick: (clickedName: string) => void;
}

const NameListItem: React.FC<NameListItemProps> = React.memo(
  (props: NameListItemProps) => (
    <li>
      <button onClick={() => props.onNameClick(props.name)}>
        {props.name}
      </button>
    </li>
  )
);

const NameList: React.FC = () => {
  const [lastClickedName, setLastClickedName] = React.useState<
    string | undefined
  >(undefined);

  const onNameClick = React.useCallback(
    (clickedName: string) => setLastClickedName(clickedName),
    []
  );

  return (
    <div>
      <h1>
        {lastClickedName === undefined
          ? "No Name Clicked Yet"
          : lastClickedName}
      </h1>
      <ul>
        {ALL_NAMES.map((name: string, idx: number) => (
          <NameListItem key={idx} name={name} onNameClick={onNameClick} />
        ))}
      </ul>
    </div>
  );
};

export default NameList;

In the given code, what I did is wrap the child component NameListItem with React.memo. It will only render once, it still receives the same props. I also added useCallback hook in the onNameClick function with empty array.