由后坐力触发的 useEffect state 在 safari 中无法按预期工作

Question

I want to trigger input type="file" click when state outside the component has changed.

When updated state is passed as prop and useEffect function is excecuted everything work as expected.

When updated state is passed as useRecoilState it seems like it doesn't work (but only in safari) - it triggers useEffect as expected but inputRef.current.click() doesn't work.

Here is the working code presenting the problem: https://codesandbox.io/s/useeffect-recoil-trigger-vs-prop-w7lwq?file=/src/index.js:315-329

And here is code:

export const recoilTriggerAtom = atom({
  key: "recoilTriggerAtom",
  default: 0
});

function ChildComponent({ propTrigger }) {
  const [recoilTrigger] = useRecoilState(recoilTriggerAtom);
  const inputRef = useRef(null);

  useLayoutEffect(() => {
    if (recoilTrigger > 0) {
      console.log("here it doesn't work in Safari");
      inputRef.current.click();
    }
  }, [recoilTrigger]);

  useLayoutEffect(() => {
    if (propTrigger > 0) {
      console.log("here it works in Safari");
      inputRef.current.click();
    }
  }, [propTrigger]);

  const onFileSelected = (e) => {
    console.log("onFileSelected", e.target.files[0]);
  };

  return (
    <div className="App">
      <input type="file" ref={inputRef} onChange={onFileSelected} />
    </div>
  );
}

function ParentComponent() {
  const [propTrigger, setPropTrigger] = useState(0);
  const [recoilTrigger, setRecoilTrigger] = useRecoilState(recoilTriggerAtom);

  const updateRecoilTrigger = () => {
    setRecoilTrigger(recoilTrigger + 1);
  };

  const updatePropTrigger = () => {
    setPropTrigger(propTrigger + 1);
  };

  return (
    <div>
      <button onClick={updateRecoilTrigger}>Recoil trigger</button>
      <button onClick={updatePropTrigger}>Prop trigger</button>
      <ChildComponent propTrigger={propTrigger} />
    </div>
  );
}

function Root() {
  return (
    <RecoilRoot>
      <ParentComponent />
    </RecoilRoot>
  );
}

Answer 1

This is most curious. Both won't work if you use useEffect instead of useLayoutEffect (but also only in Safari, FF and Chromium behave as expected). Since in Safari it works if you use useLayoutEffect I am suspecting that Safari and Reacts async nature don't go along very well.

My guess is that Safari is extremely restrictive regarding programmatically opening dialogs. So I think that Safari looses the user induced click somewhere is the whole async process of React.

The reason it only works using useLayoutEffect in relation with a prop/useState is that this effect will trigger in the same render cycle as the action itself (in opposition to useEffect which is called async). So Safari still knows that the user triggered an action in which the result is the opening of the dialog, which Safari happily allows.

But using this with recoil (and for that matter probably with any other external state management supporting concurrent mode), things are bit different.

Because you are setting an external state React won't trigger a commit phase right away. And recoil in particular collects state update for a short period of time and then triggers a new commit and rendering cycle inside React. So user action, state update and rendering phase are three different time slices. Since recoil supports concurrent mode this can even mean multiple phases of commits, so rendering might be put on hold even longer. This is all happening asynchronous, so the useLayoutEffect that listens to the recoil trigger gets executed in a different rendering cycle then the user clicked on the button.

And I think this is the reason why it won't work inside Safari. Safari does not connect those two together or rather already "forgot" that the user clicked a button. In the rendering cycle after setting the recoil state Safari only sees an imperative call to click on the file input, but has no recollection of the user clicking triggering any action in this cycle.

What I would do is go to the Github page of recoil and post the codesandbox you prepared to get confirmation if what I described is indeed what's happening here.