如何避免在每次渲染时触发 useEffect？

Question

I am creating a custom hook that accepts an object and in turn calls useEffect . The object can contain inline functions.

const stuff = useValidation({
  fields: {
    username: { /* more nested objects */ }
  },
  onSubmit: () => alert('submitted'),
});

The hook implementation looks like this:

function useValidation(config) {
  const [state, dispatch] = useReducer(validationReducer);
  useEffect(() => {
    validateFields(config.fields, state);
  }, [config.fields, state]);
}

There's more to it ( here's the actual implementation ), but these are the relevant parts.

When I create the object inline, the useEffect runs continuously. This happens because React uses reference equality (not deep equality) to check whether or not stuff has changed.

I can "fix" this by either wrapping my config in useMemo , or move it outside of the render method. Both of these are pretty bad for developer experience.

I tried Kent C. Dodds' use-deep-compare-effect library, but since I'm allowing inline arrow functions in my config, it doesn't "work".

Preferably, I'd love to be able to let the user input an inline object, and let me deal with any changes somehow.

How can I solve this?

Answer 1

It seems to me that useEffect is called every render because the config you pass to useValidation is created on the fly every time. My suggestion would be to put this in a state somewhere either in your component where you use useValidation or within the useValidation itself like so:

function useValidation(config) {
  const [storedConfig, setStoredConfig] = useState(config);
  const [state, dispatch] = useReducer(validationReducer);

  useEffect(() => {
    validateFields(config.fields, state);
  }, [storedConfig.fields, state]);
}

If the config is changeable then you should have it stored outside of the hook, either way make sure the config isn't a new object every render.

Answer 2

According to the documentation you should not put objects or arrays on the array, but the individual attributes inside it, like this:

function useValidation(config) {
  const [state, dispatch] = useReducer(validationReducer);
  useEffect(() => {
    validateFields(config.fields, state);
  }, [config.fields.username, state]);
}

I don't know what your state is, but should be an immutable value such as a string, number, boolean, etc.

Same thing with Date objects, they should be casted to String first.

Answer 3

looks like it's only Syntax Error in your code.

your function should look like this

function useValidation(config) {
 const [state, dispatch] = useReducer(validationReducer);
  useEffect(() => {
    validateFields(config.fields, state);
  }, [config.fields, state])
}