rax icon indicating copy to clipboard operation
rax copied to clipboard

[BUG] useEffect 中 setState 无法保证执行时序

Open GreyZhou opened this issue 3 years ago • 3 comments

Describe the bug 当存在数个 useEffect 时,期望的执行时序是按顺序依次执行;此时如果 useEffect 中存在 setState ,useEffect 的执行时序会被破坏

Demo

  const [val, setVal] = useState('');

  useEffect(() => {
    console.log(1);
    setVal('any');   // 该句会截断执行
    console.log(2);
  }, []);

  useEffect(() => {
    console.log(3);
  }, []);

// 期望执行顺序为 1,2,3
/**
* 1
* 3
* 2
**/

CodeSandbox link

Expected behavior 上述 demo 期望打印的顺序为 1,2,3 实际为 1,3,2。 setState 时会尝试清空剩下的 useEffect,导致执行时序不对

Screenshots image

(please complete the following information)

  • Device: [Mac]
  • OS: [macOS]
  • Browser [chrome]
  • Rax Version [3.7.4]

Additional context react 没有类似问题

GreyZhou avatar Jan 15 '22 05:01 GreyZhou

我来看下这个问题

SoloJiang avatar Jan 24 '22 03:01 SoloJiang

const [page, setPage] = useState(0); useEffect(() => { setPage(1) }, []) useEffect(() => { setPage(2) }, []) console.log('page:', page)

react中执行结果:console出来 page: 2 rax中执行结果:console出来 page:1 期望结果:按顺序执行,执行结果为 page: 2

szxy00000 avatar Jan 24 '22 07:01 szxy00000

已经确认表现不符合开发者预期,但是该改动属于 break change,当前大版本不会修复

SoloJiang avatar Mar 11 '22 03:03 SoloJiang