useRenderedEffect(() => {
// init here
return () => {
// clean-up here
}
}, []);
Here is an example with Goji blocking mode enabled. A React component commits ( renders ) 3 times, its 2nd/3rd commit happen while 1st setData is still working.
source
```
title useRenderedEffect
note over React: mount
React->buffer: commit a
buffer->setData: a
setData->(2)webview: render a
React->buffer: commit b
React->buffer: commit c
webview->(2)setData: done a
setData-->useRenderedEffect: effect a
buffer->setData: b+c
setData->(2)webview: render b+c
webview->(2)setData: done b+c
setData-->useRenderedEffect: clean-up a
setData-->useRenderedEffect: effect b
setData-->useRenderedEffect: clean-up b
setData-->useRenderedEffect: effect c
note over React: unmount
React-->useRenderedEffect: clean-up c
```
Usage:
Here is an example with Goji blocking mode enabled. A React component commits ( renders ) 3 times, its 2nd/3rd commit happen while 1st setData is still working.
source
``` title useRenderedEffect note over React: mount React->buffer: commit a buffer->setData: a setData->(2)webview: render a React->buffer: commit b React->buffer: commit c webview->(2)setData: done a setData-->useRenderedEffect: effect a buffer->setData: b+c setData->(2)webview: render b+c webview->(2)setData: done b+c setData-->useRenderedEffect: clean-up a setData-->useRenderedEffect: effect b setData-->useRenderedEffect: clean-up b setData-->useRenderedEffect: effect c note over React: unmount React-->useRenderedEffect: clean-up c ```