React：useEffect “悖论”与 eventHandler 道具

Question

Problem with this example .

I've got an Input component. This input component has an onChange prop to handle any data changes from inside .

As it should be, if I update the value from outside , the onChange prop is not fired, since nothing changed from inside the input component. If you start typing the onChange prop is fired and I can update the state from outside as well.

But if some condition is met (in my example just a boolean state), I want to prefill the input field from inside, therefore I'll have to call an onChange event so that the App can update the state from outside.

The problem/paradox is that the useEffect checking for a condition now needs the onChange prop as a dependency, and since this prop is a method, it will change on every render. This means now the input element always resets to the value from the useEffect when anything is changed because the useEffect is triggered again.

My problem would not be there if I was allowed to remove the onChange prop from the useEffect dependency, but this is of course against the rules of the useEffect hook.

The only "solutions" that came to my mind:

• I could move the condition outside of the Input element into the App component. This makes sense for my example, but in the actual scenario the should be the same every time the component is used, and I don't want to repeat the condition every time from outside since the condition is also not just a boolean in the real scenario of course.
• I could add an additional state, whether the condition has already be checked and fire the useEffect only if it has not been triggered yet. But this get really complicated really fast, if the condition needs to get checked again at some point, etc. etc.

I've come across this problem in different shapes scenarios, so I really hope to get an answer that can be applied to similar scenarios in general. Maybe I just have an anti-pattern in my code of how I work with event handlers?

Thank you in advance for all answers ^^.

Answer 1

I would change the if statement to only run if prefillCondition has changed. That means you'll need to know what the value was on the last render. Doing that inline would look like:

const [prefillCondition, setPrefillCondition] = React.useState(false);
const previous = useRef();
React.useEffect(() => {
  previous.current = prefillCondition;
})
React.useEffect(() => {
  // On the first render, previous.current will be undefined. On every render after that
  // it will tell you what value prefillCondition had on the previous render.
  if (prefillCondition && !previous.current) {
    onChange("value from useEeffff");
  }
}, [onChange, prefillCondition, previous]);

I find it common to want to remember a value from the previous render. If you do too, you may want to consider extracting that logic to a custom hook:

const usePrevious = (value) => {
  const previous = useRef();
  React.useEffect(() => {
    previous.current = value;
  })
  return previous.current;
}

// used like:
const [prefillCondition, setPrefillCondition] = React.useState(false);
const prevPrefillCondition = usePrevious(prefillCondition);
React.useEffect(() => {
  if (prefillCondition && !prevPrefillCondition) {
    onChange("value from useEeffff");
  }
}, [onChange, prefillCondition, prevPrefillCondition]);

Answer 2

Consider this

const a = () => 'foo bar'
const b = () => 'foo bar'

a == b // false

Even though the function has the same code it has a different memory reference so to React it always appears as a new (changed) prop, that's why it calls re-render and since you always pass new anonymous onChange callback it calls useEffect each time.

So you could either omit it from the dependencies array (note the ESlint rule)

React.useEffect(() => {
    // this would supposibly fetch some default value based on conditions and the call an onChange
    if (prefillCondition) {
      onChange("value from useEeffff");
    }
  }, [prefillCondition]); // eslint-disable-line react-hooks/exhaustive-deps

or useReact.useCallback() function which solves exactly your problem and prevents creating a new function on every render.

const App = () => {
  const [myVal, setMyVal] = React.useState("");

  const handler = React.useCallback((a) => {
    console.log("onchange", a);
    setMyVal(a);
  }, []);

  return (
    <div>
      <Input value={myVal} onChange={handler} />
      <div>
        <button
          onClick={() => {
            setMyVal("smth");
          }}
        >
          set to smth from outside
        </button>
      </div>
    </div>
  );
};

Answer 3

你不能只在输入上设置一个默认值

defaultValue={prefillCondition ? "text here" : ""}