What is it?
I think your guys know there are serval tips to improve react render performance, such as useMemo.
If you already read Dan's blog, you should also know other tips such as "Move State Down" and "Lift Content Up".
Dan's blog
But do u ever think if u have a complex component, and this component have a list items (maybe for ten), if u want update one of item (maybe No. 3), then you only need call partialRender function such as
partialRender({3: `my new content`});
Then that's all, you don't need take care other optimizations, and it will not make whole re-render.
That is what usePartialRender do, and sometimes it is a bit tricky, someone will think is it possible render partial for a function component? Yes, it's really partial update.
what is usePartialRender purpose.
help u update a complex component partial content without restructure.
provide a easy way to refresh all content.
Quick Review
- Online Demo: codesandbox
const [ListContent, partialRender, setRenderKeys] =
usePartialRender(
initRenderKeys,
initList
);
usePartialRender could input two optional initial variables or input nothing.
The initial variables only run once also could lazy assign.
| Input KEY | Required | Description | Lazy assign | Run Times |
|---|---|---|---|---|
| initRenderKeys | No | The initial render keys, use for partialRender({updateKey: updateContent}) | ()=>initRenderKeys | one |
| initList | No | The initial list you want render, if key not exists in render keys will not shown. | ()=>initList | one |
| Output KEY | Description | Will make whole render? |
|---|---|---|
| ListContent | The finial content you could use in render directly, such as <div>{ListContent}</div> | No |
| partialRender | partial render function, you could assign your update content only | No |
| setRenderKeys | This could help u control render keys, you need assign all key list. this will trigger whole render, but will not effect list render. | Yes |
Conclusion
There is no magic for usePartialRender, I try to make things become automatic and let use become more convenient. usePartialRender especial suit for dynamic numbers children, I use it in my popup components, and let it to collect all float DOM.
usePartialRender source code
https://github.com/react-atomic/reshow/blob/main/packages/reshow-return/src/usePartialRender.jsreact popup component
https://github.com/react-atomic/react-atomic-organism/tree/main/packages/organism-react-popupNPM package
https://github.com/react-atomic/reshow/blob/main/packages/reshow-return
Top comments (0)