离开 useEffect 空的依赖给 eslint 错误

Question

I have a small problem. And Here is how I want the code to behave.

when the component is mounted call the useEffect only once, but inside the useEffect I am using a value from redux store which require to put in dependancy, which causing an infinit loop

So how do I save the call function only once in the component without useEffect and avoid the infinite loop, or is there another way

Also If I write the logic in a function, it requires the function to be callback and I face the same issue

Here is my implementation:

const { price = { min: 5000 } } = useSelector(selectPendingPost);


const savePrice = useCallback(
    (value) => {
      dispatch(
        addFieldsToPendingPost({
          price: { min: value[0], ...(value[1] && { max: value[1] }) },
        })
      );
    },
    [dispatch]
  );

useEffect(() => {
    savePrice([price.min]);
  }, [savePrice]);

Answer 1

Have you tried to add price.min as dependency? price is an object and is recreated everytime. But price.min seems like it's a number, so the dependency will compare its value and this should be constant after the first call of useEffect