React select passing props for components to useMemo

I am trying to use useMemo for the Option, MultiValue custom component in the react select.

When I tried it getting issue, am I missing something in the below code snippet?

Getting props undefined, what can be the issue, didn’t find much reference on this

Sample Snippet

import React, { useMemo } from "react";
import Select, { components } from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const Option = useMemo(() => {
  return (
    <div>
      <components.Option {...props}>
        <checkbox checked={props.isSelected} onChange={() => null} />
        <label>{props.label}</label>
      </components.Option>
    </div>
  );
}, [props]);

const MultiValue = useMemo(() => {
  return (
    <components.MultiValue {...props}>
      <span>{props.data.label}</span>
    </components.MultiValue>
  );
}, [props]);

const CustomSelect = () => (
  <Select options={options} isMulti components={{Option, MultiValue}} />
);

export default CustomSelect;

Reproducible code link

If i remo useMemo hook it works, but not understanding as it should work !! confused

[camcnz]

I can see what @dileepthomas is getting at. It would be great to have an example of how (if possible) to use react-select with memo and Hooks. For me currently React.memo(Select) doesn’t work because you have to set double curly brackets ‘{{’ in components={{SingleValue}}. This is creating a new object each render therefore triggering memo to rerender as it’s a new prop.

[bladey]

Thanks for your help here @Rall3n.

@dileepthomas I’m going to close this now as @Rall3n points out this isn’t react-select related.

Please let me know if you think otherwise.