0
interface params{
  texts: string[];
  handlePropertyTerm: (value:string) => void;
}

let SortOptions = React.memo(({texts, handlePropertyTerm}:params) => (
    <>
      {texts.map((text) => (
        <button key={text} defaultValue={text} onClick={() => handlePropertyTerm(text)}>{text}</button>
      ))}
    </>
));

function App(){
    let [sortProperty, setPropertyTerm] = React.useState("");
    let sortPropertyTerm = React.useCallback((value) => {
        console.log("Callback value:", value);
        setPropertyTerm(value);
    }, []);
    console.log("App");


    return (
    <>
    <SortOptions texts={["hi", "bye"]} handlePropertyTerm={sortPropertyTerm}></SortOptions>
    </>
    );
}

The code i described above creates two buttons one called hi and another called bye each with a callback which causes the sortProperty to contain either "hi" or "bye" depending on the button clicked. After App first loads and i click the hi button, it will log Callback value = hi and App. I believe this is because there was a state change in App causing a re-render. When I click hi the second time the same statements are logged. When I click hi the third time, only the Callback value = hi is logged.

Please can someone explain what is causing App to be re-rendered the second time I click hi but not the third time?

Anj
  • 1
  • I removed my answer since this is a duplicate. Does this answer your question? [React hooks useState setValue still rerender one more time when value is equal](https://stackoverflow.com/questions/57652176/react-hooks-usestate-setvalue-still-rerender-one-more-time-when-value-is-equal) Just to point it out: it has **nothing to do** with your `React.memo` or `React.useCallback`. That's just how react handles state updates. – ysfaran Feb 07 '22 at 23:27
  • @ysfaran yes this is what I was looking for, i posted a new question making my issue even clearer and essentially you answered that question too. Thanks! – Anj Feb 07 '22 at 23:33

0 Answers0