DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Hill Liu
Hill Liu

Posted on

What is really partial update [React Hook] look like?

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`});
Enter fullscreen mode Exit fullscreen mode

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.

  1. help u update a complex component partial content without restructure.

  2. provide a easy way to refresh all content.

Quick Review

  const [ListContent, partialRender, setRenderKeys] =
 usePartialRender(
    initRenderKeys,
    initList
  );
Enter fullscreen mode Exit fullscreen mode

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.

Oldest comments (0)

🌚 Life is too short to browse without dark mode