React 组件渲染问题

[izzy27]

我在写一个 chrome 插件

content script 会给页面增加一个按钮，点击这个按钮后

1. content script会发消息，service worker和sidePanel都会监听这个消息
2. service worker收到消息后，会打开侧边栏
3. sidePanel监听消息，然后会把页面信息渲染出来

service worker的代码

chrome.runtime.onMessage.addListener((req, sender) => {
  if (req.type === 'openSidePanel') {
    chrome.sidePanel.open({ tabId: sender.tab.id });
  }
});

侧边栏的伪代码：

const SidePanel = () =>{
	const [info, setInfo] = useState('');
    
    useEffect(()=>{
    	chrome.runtime.onMessage.addListener((req)=> setInfo(req.info))
    })

	return ({info===''?'loading...':info})
}

但是有个非常奇怪的现象，就是我第一次点击，侧边栏能正常打开，但是会显示 loading

只有第二次点击之后，才会把 info 信息渲染出来

我的猜测是，第一次点击的时候，组件刚渲染出来，useEffect 里面监听消息没有生效，第二次点击后，组件已经渲染完毕了，useEffect 里面可以监听到消息了，如果是这样的话，应该怎么解决？

不是很熟悉前端，请教一下大家怎么解决

[wdking]

使用 uselayouteffect

[realJamespond]

useEffect(()=>{
chrome.runtime.onMessage.addListener((req)=> setInfo(req.info))
},[])
要加 deps 啊，不然每次 render 都执行

[zkkz]

在 service worker 暂存信息，等 SidePanel 渲染完成后，再与 service worker 通信获取信息。

[Albertcord]

怀疑是没有同步更新导致的，可以尝试在侧边栏实现里这么写：
```JavaScript
import {flushSync} from 'react-dom';
// ...
useEffect(()=>{
chrome.runtime.onMessage.addListener((req)=> {
flushSync(() => {
setInfo(req.info);
});
})
return () => {
// unsubscribe addListener
}
}, [])
```

[izzy27]

@zkkz 这个方法可以的，感谢