airbnb / goji-js

React ❤️ Mini Program
https://goji.js.org
MIT License
224 stars 27 forks source link

Refactor useRenderedEffect to support clean-up callback #115

Closed malash closed 3 years ago

malash commented 3 years ago

Usage:

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.

useRenderedEffect (1)

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 ```