From db768a18f91f203355a9bbdccbafb2c855a2af25 Mon Sep 17 00:00:00 2001 From: SukkaW Date: Sun, 3 Nov 2024 03:05:47 +0800 Subject: [PATCH] docs(use-component-will-receive-update): update usage --- .../use-component-will-receive-update.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/src/pages/use-component-will-receive-update.mdx b/docs/src/pages/use-component-will-receive-update.mdx index c23d5a47..4137cafd 100644 --- a/docs/src/pages/use-component-will-receive-update.mdx +++ b/docs/src/pages/use-component-will-receive-update.mdx @@ -48,6 +48,25 @@ This hook is a helper for the above pattern. useComponentWillReceiveUpdate(() => setState(false), [state]) ``` +Since React will re-execute the component function immediately in response to the state change, you can early return your component, so React can re-execute the component function earlier. + +```jsx +const changed = useComponentWillReceiveUpdate(() => setState(false), [state]); +// some other hooks +const handleChange = useCallback(() => { + // do something +}, []); + +// early return to skip the JSX creation +if (changed) { + return null; +} + +return ; +``` + +---- + This should only apply to states of the current component. Modifying states of other components causes React reporting errors. You may also want to read [(Avoid) Notifying parent components about state changes](https://react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes) and [(Avoid) Passing data to the parent](https://react.dev/learn/you-might-not-need-an-effect#passing-data-to-the-parent). If you really need to directly modify other components' states (E.g. when working with third-party libraries/components/SDKs where you don't have control of that code), use `flushSync` to separate two state updates: