score:1

you can wrap the function in useselector into createselector from reselect which will memoise the selector values. you can do it like this:

import react, { useeffect } from "react";
import { createselector } from "reselect";
import { usedispatch, useselector } from "react-redux";
import { searchpersonaction } from "./store";

const memoiseselector = createselector(
  (s) => s.name,
  (name) => name
);

const search = () => {
  const dispatch = usedispatch();
  const name = useselector(memoiseselector);
  const search = (e) => {
    const txt = e.target.value;
    dispatch(searchpersonaction(txt));
  };
  return (
    <div>
      <input onchange={search} placeholder="search" />
      <ul>
        {name?.map((p) => (
          <li key={p.name}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default search;

further more examples you can check here on official docs.


Related Query

More Query from same tag