How to use useEffect? so it wont duplicates displayed products using filter function? Reactjs-redux

Question

My data from menProducts coming from store component just loops too many. Meaning it duplicates or renders too many when using my filter function. I've read using useEffect can render it only once but I don't know how to trigger its effect.

  const [filter, setFilter] = useState('');
  const menProducts = useSelector((state) => state.menProducts);

    const SearchText = (event) => { <--- this function is for input search bar
      setFilter(event.target.value);
    }

    useEffect(() => { <--- ??
    
    }, []);

      let dataSearch = menProducts.filter(id => { <-----Filter function
      return Object.keys(id).some(key=>
          id[key].toString().toLowerCase().includes(filter.toString().toLowerCase())
      )

  return (
    <main>

      {dataSearch.map((menproduct) => ( 
          <ProductMen key={menproduct}/> <---imported <ProductMen/> component is a component that use useDispatch for store reducer and it also displayed products.
        ))}
    </main>
  )
}

Answer 1

You don't need to useEffect in this case, you just have to apply the filter at the right time like this:

const [filter, setFilter] = useState("");

const menProducts = useSelector((state) => state.menProducts);

const SearchText = (event) => {
    setFilter(event.target.value);
};

return (
    <main>
        {menProducts
            .filter((menproduct) =>
                Object.keys(menproduct).some((key) =>
                    menproduct[key]
                        .toString()
                        .toLowerCase()
                        .includes(filter.toString().toLowerCase())
                )
            )
            .map((menproduct) => (
                <ProductMen key={menproduct} />
            ))}
    </main>
);

Demo: https://stackblitz.com/edit/react-6lfqps?file=src/App.js

In the demo i've also included an alternative that use useEffect if you want to take a look at it