From c6a93542855d5219dd5553cfba10718dbd5cea60 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Mon, 3 Jun 2024 14:06:46 -0700 Subject: [PATCH 01/13] Update README.md to promote useOnyx usage over withOnyx --- README.md | 134 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 108 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 52461ffb5..4b326d1f5 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Awesome persistent storage solution wrapped in a Pub/Sub library. - Onyx allows other code to subscribe to changes in data, and then publishes change events whenever data is changed - Anything needing to read Onyx data needs to: 1. Know what key the data is stored in (for web, you can find this by looking in the JS console > Application > local storage) - 2. Subscribe to changes of the data for a particular key or set of keys. React components use `withOnyx()` and non-React libs use `Onyx.connect()`. + 2. Subscribe to changes of the data for a particular key or set of keys. React functional components use the `useOnyx()` hook (recommended), class components use `withOnyx()` HOC (deprecated, not-recommended) and non-React libs use `Onyx.connect()`. 3. Get initialized with the current value of that key from persistent storage (Onyx does this by calling `setState()` or triggering the `callback` with the values currently on disk as part of the connection process) - Subscribing to Onyx keys is done using a constant defined in `ONYXKEYS`. Each Onyx key represents either a collection of items or a specific entry in storage. For example, since all reports are stored as individual keys like `report_1234`, if code needs to know about all the reports (e.g. display a list of them in the nav menu), then it would subscribe to the key `ONYXKEYS.COLLECTION.REPORT`. @@ -116,7 +116,32 @@ To teardown the subscription call `Onyx.disconnect()` with the `connectionID` re Onyx.disconnect(connectionID); ``` -We can also access values inside React components via the `withOnyx()` [higher order component](https://reactjs.org/docs/higher-order-components.html). When the data changes the component will re-render. +We can also access values inside React functional components via the `useOnyx()` [hook](https://react.dev/reference/react/hooks) (recommended) or class components via the `withOnyx()` [higher order component](https://reactjs.org/docs/higher-order-components.html) (deprecated, not-recommended). When the data changes the component will re-render. + +```javascript +import React from 'react'; +import {useOnyx} from 'react-native-onyx'; + +const App = () => { + const [session] = useOnyx('session'); + + return ( + + {session.token ? Logged in : Logged out} + + ); +}; + +export default App; +``` + +While `Onyx.connect()` gives you more control on how your component reacts as data is fetched from disk, `useOnyx()` will delay the rendering of the wrapped component until all keys/entities have been fetched and passed to the component, this can be convenient for simple cases. This however, can really delay your application if many entities are connected to the same component, you can pass an `initialValue` to each key to allow Onyx to eagerly render your component with this value. + +```javascript +const [session] = useOnyx('session', {initialValue: {}}); +``` + +> **Deprecated Note**: Please note, `withOnyx()` Higher Order Component (HOC) is now considered deprecated. Use `useOnyx()` hook instead. ```javascript import React from 'react'; @@ -164,27 +189,68 @@ export default withOnyx({ }, true)(App); ``` -### Dependent Onyx Keys and withOnyx() +### Dependent Onyx Keys and useOnyx() Some components need to subscribe to multiple Onyx keys at once and sometimes, one key might rely on the data from another key. This is similar to a JOIN in SQL. Example: To get the policy of a report, the `policy` key depends on the `report` key. ```javascript -export default withOnyx({ - report: { - key: ({reportID) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - }, - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, - }, -})(App); +import React from 'react'; +import {useOnyx} from 'react-native-onyx'; +const ONYXKEYS = { + REPORT: 'report_1234', + POLICY: 'policy_' +}; + +const App = () => { + const [report] = useOnyx(ONYXKEYS.REPORT); + const [policy] = useOnyx(`${ONYXKEYS.POLICY}${report.policyID}`); + + return ( + + {/* Render with policy data */} + + ); +}; + +export default App; ``` Background info: - The `key` value can be a function that returns the key that Onyx subscribes to - The first argument to the `key` function is the `props` from the component -**Detailed explanation of how this is handled and rendered:** +```javascript +const App = ({reportID}) => { + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`); + + return ( + + {/* Render with policy data */} + + ); +}; + +export default App; +``` + +**Detailed explanation of how this is handled and rendered with `useOnyx()`:** + +1. The component mounts with a `reportID={1234}` prop. +2. The `useOnyx` hook evaluates the mapping and subscribes to the key `reports_1234` using the `reportID` prop. +3. The `useOnyx` hook fetches the data for the key `reports_1234` from Onyx and sets the state with the initial value (if provided). +4. Since `policyID` is not defined yet, it defaults to `undefined`. The `useOnyx` hook subscribes to the key `policies_undefined`. +5. The `useOnyx` hook reads the data and updates the state of the component: + - `report={{reportID: 1234, policyID: 1, ...rest of the object...}}` - `policy={undefined}` (since there is no policy with ID `undefined`) +6. As there is still an `undefined` key, the `useOnyx` hook again evaluates the key `policies_1` after fetching the updated `report` object which has `policyID: 1`. +7. The `useOnyx` hook reads the data and updates the state with: + - `policy={{policyID: 1, ...rest of the object...}}` +8. Now, all mappings have values that are defined (not undefined), and the component is rendered with all necessary data. + +* It is VERY important to NOT use empty string default values like `report.policyID || ''`. This results in the key returned to `useOnyx` as `policies_`, which subscribes to the ENTIRE POLICY COLLECTION and is most assuredly not what you were intending. You can use a default of `0` (as long as you are reasonably sure that there is never a policyID=0). This allows Onyx to return `undefined` as the value of the policy key, which is handled by `useOnyx` appropriately. + +**Detailed explanation of how this is handled and rendered with `withOnyx` HOC:** 1. The component mounts with a `reportID={1234}` prop 2. `withOnyx` evaluates the mapping 3. `withOnyx` connects to the key `reports_1234` because of the prop passed to the component @@ -239,15 +305,23 @@ Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, { There are several ways to subscribe to these keys: ```javascript -withOnyx({ - allReports: {key: ONYXKEYS.COLLECTION.REPORT}, -})(MyComponent); +const MyComponent = () => { + const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); + + return ( + + {/* Render with allReports data */} + + ); +}; + +export default MyComponent; ``` This will add a prop to the component called `allReports` which is an object of collection member key/values. Changes to the individual member keys will modify the entire object and new props will be passed with each individual key update. The prop doesn't update on the initial rendering of the component until the entire collection has been read out of Onyx. ```js -Onyx.connect({key: ONYXKEYS.COLLECTION.REPORT}, callback: (memberValue, memberKey) => {...}}); +Onyx.connect({key: ONYXKEYS.COLLECTION.REPORT}, callback: (memberValue, memberKey) => {...}); ``` This will fire the callback once per member key depending on how many collection member keys are currently stored. Changes to those keys after the initial callbacks fire will occur when each individual key is updated. @@ -256,11 +330,11 @@ This will fire the callback once per member key depending on how many collection Onyx.connect({ key: ONYXKEYS.COLLECTION.REPORT, waitForCollectionCallback: true, - callback: (allReports) => {...}}, + callback: (allReports) => {...}, }); ``` -This final option forces `Onyx.connect()` to behave more like `withOnyx()` and only update the callback once with the entire collection initially and later with an updated version of the collection when individual keys update. +This final option forces `Onyx.connect()` to behave more like `useOnyx()` and only update the callback once with the entire collection initially and later with an updated version of the collection when individual keys update. ### Performance Considerations When Using Collections @@ -270,12 +344,12 @@ Remember, `mergeCollection()` will notify a subscriber only *once* with the tota ```js // Bad -_.each(reports, report => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, report)); // -> A component using withOnyx() will have it's state updated with each iteration +_.each(reports, report => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, report)); // -> A component using useOnyx() will have it's state updated with each iteration // Good const values = {}; _.each(reports, report => values[`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`] = report); -Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, values); // -> A component using withOnyx() will only have it's state updated once +Onyx.mergeCollection(ONYXKEYS.COLLECTION.REPORT, values); // -> A component using useOnyx() will only have its state updated once ``` ## Clean up @@ -325,12 +399,20 @@ Onyx.init({ ``` ```js -export default withOnyx({ - reportActions: { - key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}_`, - canEvict: props => !props.isActiveReport, - }, -})(ReportActionsView); +const ReportActionsView = ({isActiveReport}) => { + const [reportActions] = useOnyx( + ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}_`, + {canEvict: () => !isActiveReport} + ); + + return ( + + {/* Render with reportActions data */} + + ); +}; + +export default ReportActionsView; ``` # Benchmarks From 3a8312ef1a2ac6ebd500f420b485b6098f008e41 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader <56457735+ikevin127@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:24:59 -0700 Subject: [PATCH 02/13] adjustment 1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4b326d1f5..e19a4f50b 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Awesome persistent storage solution wrapped in a Pub/Sub library. - Onyx allows other code to subscribe to changes in data, and then publishes change events whenever data is changed - Anything needing to read Onyx data needs to: 1. Know what key the data is stored in (for web, you can find this by looking in the JS console > Application > local storage) - 2. Subscribe to changes of the data for a particular key or set of keys. React functional components use the `useOnyx()` hook (recommended), class components use `withOnyx()` HOC (deprecated, not-recommended) and non-React libs use `Onyx.connect()`. + 2. Subscribe to changes of the data for a particular key or set of keys. React function components use the `useOnyx()` hook (recommended), both class and function components can use `withOnyx()` HOC (deprecated, not-recommended) and non-React libs use `Onyx.connect()`. 3. Get initialized with the current value of that key from persistent storage (Onyx does this by calling `setState()` or triggering the `callback` with the values currently on disk as part of the connection process) - Subscribing to Onyx keys is done using a constant defined in `ONYXKEYS`. Each Onyx key represents either a collection of items or a specific entry in storage. For example, since all reports are stored as individual keys like `report_1234`, if code needs to know about all the reports (e.g. display a list of them in the nav menu), then it would subscribe to the key `ONYXKEYS.COLLECTION.REPORT`. From 6adcb937dda26f151889ae363597662d27271883 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader <56457735+ikevin127@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:25:23 -0700 Subject: [PATCH 03/13] adjustment 2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e19a4f50b..c0aee333b 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,7 @@ To teardown the subscription call `Onyx.disconnect()` with the `connectionID` re Onyx.disconnect(connectionID); ``` -We can also access values inside React functional components via the `useOnyx()` [hook](https://react.dev/reference/react/hooks) (recommended) or class components via the `withOnyx()` [higher order component](https://reactjs.org/docs/higher-order-components.html) (deprecated, not-recommended). When the data changes the component will re-render. +We can also access values inside React function components via the `useOnyx()` [hook](https://react.dev/reference/react/hooks) (recommended) or class and function components via the `withOnyx()` [higher order component](https://reactjs.org/docs/higher-order-components.html) (deprecated, not-recommended). When the data changes the component will re-render. ```javascript import React from 'react'; From 7ba5b0654e5c334656468d1f5c2071e205f1b49b Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader <56457735+ikevin127@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:37:55 -0700 Subject: [PATCH 04/13] adjustment 3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- README.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c0aee333b..5e5941007 100644 --- a/README.md +++ b/README.md @@ -135,11 +135,18 @@ const App = () => { export default App; ``` -While `Onyx.connect()` gives you more control on how your component reacts as data is fetched from disk, `useOnyx()` will delay the rendering of the wrapped component until all keys/entities have been fetched and passed to the component, this can be convenient for simple cases. This however, can really delay your application if many entities are connected to the same component, you can pass an `initialValue` to each key to allow Onyx to eagerly render your component with this value. +The `useOnyx()` hook won't delay the rendering of the component using it while the key/entity is being fetched and passed to the component. However, you can simulate this behavior by checking if the `status` of the hook's result metadata is `loading`. When `status` is `loading` it means that the Onyx data is being loaded into cache and thus is not immediately available, while `loaded` means that the data is already loaded and available to be consumed. -```javascript -const [session] = useOnyx('session', {initialValue: {}}); -``` +\```javascript +const [reports, reportsResult] = useOnyx(ONYXKEYS.COLLECTION.REPORT); +const [session, sessionResult] = useOnyx(ONYXKEYS.SESSION); + +if (reportsResult.status === 'loading' || sessionResult.status === 'loading') { + return ; // or `null` if you don't want to render anything. +} + +// rest of the component's code. +\``` > **Deprecated Note**: Please note, `withOnyx()` Higher Order Component (HOC) is now considered deprecated. Use `useOnyx()` hook instead. From aee9495cbed33545b2420352ee6405bb73f19ea0 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader <56457735+ikevin127@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:38:20 -0700 Subject: [PATCH 05/13] adjustment 4 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5e5941007..3b7a53e99 100644 --- a/README.md +++ b/README.md @@ -247,7 +247,7 @@ export default App; 1. The component mounts with a `reportID={1234}` prop. 2. The `useOnyx` hook evaluates the mapping and subscribes to the key `reports_1234` using the `reportID` prop. 3. The `useOnyx` hook fetches the data for the key `reports_1234` from Onyx and sets the state with the initial value (if provided). -4. Since `policyID` is not defined yet, it defaults to `undefined`. The `useOnyx` hook subscribes to the key `policies_undefined`. +4. Since `report` is not defined yet, `report?.policyID` defaults to `undefined`. The `useOnyx` hook subscribes to the key `policies_undefined`. 5. The `useOnyx` hook reads the data and updates the state of the component: - `report={{reportID: 1234, policyID: 1, ...rest of the object...}}` - `policy={undefined}` (since there is no policy with ID `undefined`) 6. As there is still an `undefined` key, the `useOnyx` hook again evaluates the key `policies_1` after fetching the updated `report` object which has `policyID: 1`. From fe656d5da4a39403a5bd75d2e64649ae7caf9715 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader <56457735+ikevin127@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:38:31 -0700 Subject: [PATCH 06/13] adjustment 5 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3b7a53e99..568f26990 100644 --- a/README.md +++ b/README.md @@ -249,7 +249,8 @@ export default App; 3. The `useOnyx` hook fetches the data for the key `reports_1234` from Onyx and sets the state with the initial value (if provided). 4. Since `report` is not defined yet, `report?.policyID` defaults to `undefined`. The `useOnyx` hook subscribes to the key `policies_undefined`. 5. The `useOnyx` hook reads the data and updates the state of the component: - - `report={{reportID: 1234, policyID: 1, ...rest of the object...}}` - `policy={undefined}` (since there is no policy with ID `undefined`) + - `report={{reportID: 1234, policyID: 1, ...rest of the object...}}` + - `policy={undefined}` (since there is no policy with ID `undefined`) 6. As there is still an `undefined` key, the `useOnyx` hook again evaluates the key `policies_1` after fetching the updated `report` object which has `policyID: 1`. 7. The `useOnyx` hook reads the data and updates the state with: - `policy={{policyID: 1, ...rest of the object...}}` From c80984b50ab688d5f6ccc458edc699cf256903bd Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader <56457735+ikevin127@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:38:41 -0700 Subject: [PATCH 07/13] adjustment 6 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 568f26990..566378d14 100644 --- a/README.md +++ b/README.md @@ -251,7 +251,7 @@ export default App; 5. The `useOnyx` hook reads the data and updates the state of the component: - `report={{reportID: 1234, policyID: 1, ...rest of the object...}}` - `policy={undefined}` (since there is no policy with ID `undefined`) -6. As there is still an `undefined` key, the `useOnyx` hook again evaluates the key `policies_1` after fetching the updated `report` object which has `policyID: 1`. +6. The `useOnyx` hook again evaluates the key `policies_1` after fetching the updated `report` object which has `policyID: 1`. 7. The `useOnyx` hook reads the data and updates the state with: - `policy={{policyID: 1, ...rest of the object...}}` 8. Now, all mappings have values that are defined (not undefined), and the component is rendered with all necessary data. From 708b7ffaab03936d462d381559aa26f8280c30c7 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader <56457735+ikevin127@users.noreply.github.com> Date: Tue, 4 Jun 2024 13:38:54 -0700 Subject: [PATCH 08/13] adjustment 7 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fábio Henriques --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 566378d14..220bf1f42 100644 --- a/README.md +++ b/README.md @@ -407,9 +407,9 @@ Onyx.init({ ``` ```js -const ReportActionsView = ({isActiveReport}) => { +const ReportActionsView = ({reportID, isActiveReport}) => { const [reportActions] = useOnyx( - ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}_`, + `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}_`, {canEvict: () => !isActiveReport} ); From 2d62063f9ddc3c388b91d7e9f274d99a4963156c Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Tue, 4 Jun 2024 14:26:47 -0700 Subject: [PATCH 09/13] final adjustment --- README.md | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/README.md b/README.md index 220bf1f42..b99d54ab9 100644 --- a/README.md +++ b/README.md @@ -201,32 +201,6 @@ Some components need to subscribe to multiple Onyx keys at once and sometimes, o Example: To get the policy of a report, the `policy` key depends on the `report` key. -```javascript -import React from 'react'; -import {useOnyx} from 'react-native-onyx'; -const ONYXKEYS = { - REPORT: 'report_1234', - POLICY: 'policy_' -}; - -const App = () => { - const [report] = useOnyx(ONYXKEYS.REPORT); - const [policy] = useOnyx(`${ONYXKEYS.POLICY}${report.policyID}`); - - return ( - - {/* Render with policy data */} - - ); -}; - -export default App; -``` - -Background info: -- The `key` value can be a function that returns the key that Onyx subscribes to -- The first argument to the `key` function is the `props` from the component - ```javascript const App = ({reportID}) => { const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); From 4c29663f125374ff788b98dd66f179a3a9e87747 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Tue, 4 Jun 2024 14:31:45 -0700 Subject: [PATCH 10/13] final adjustment 2.0 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b99d54ab9..36b087e10 100644 --- a/README.md +++ b/README.md @@ -167,7 +167,7 @@ export default withOnyx({ })(App); ``` -While `Onyx.connect()` gives you more control on how your component reacts as data is fetched from disk, `withOnyx()` will delay the rendering of the wrapped component until all keys/entities have been fetched and passed to the component, this can be convenient for simple cases. This however, can really delay your application if many entities are connected to the same component, you can pass an `initialValue` to each key to allow Onyx to eagerly render your component with this value. +Differently from `useOnyx()`, `withOnyx()` will delay the rendering of the wrapped component until all keys/entities have been fetched and passed to the component, this can be convenient for simple cases. This however, can really delay your application if many entities are connected to the same component, you can pass an `initialValue` to each key to allow Onyx to eagerly render your component with this value. ```javascript export default withOnyx({ From 3700231adb114e0a911e9b8e7ebf6a47c55c9986 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Tue, 4 Jun 2024 14:36:25 -0700 Subject: [PATCH 11/13] fixed code block formatting --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 36b087e10..cca2d8fca 100644 --- a/README.md +++ b/README.md @@ -137,7 +137,7 @@ export default App; The `useOnyx()` hook won't delay the rendering of the component using it while the key/entity is being fetched and passed to the component. However, you can simulate this behavior by checking if the `status` of the hook's result metadata is `loading`. When `status` is `loading` it means that the Onyx data is being loaded into cache and thus is not immediately available, while `loaded` means that the data is already loaded and available to be consumed. -\```javascript +```javascript const [reports, reportsResult] = useOnyx(ONYXKEYS.COLLECTION.REPORT); const [session, sessionResult] = useOnyx(ONYXKEYS.SESSION); @@ -146,7 +146,7 @@ if (reportsResult.status === 'loading' || sessionResult.status === 'loading') { } // rest of the component's code. -\``` +``` > **Deprecated Note**: Please note, `withOnyx()` Higher Order Component (HOC) is now considered deprecated. Use `useOnyx()` hook instead. From f19ac5d5b1e9c4837477b3aaedaf0e4400c46c84 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Tue, 4 Jun 2024 14:39:40 -0700 Subject: [PATCH 12/13] added deprecation warning note --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cca2d8fca..3bc9338c0 100644 --- a/README.md +++ b/README.md @@ -148,7 +148,9 @@ if (reportsResult.status === 'loading' || sessionResult.status === 'loading') { // rest of the component's code. ``` -> **Deprecated Note**: Please note, `withOnyx()` Higher Order Component (HOC) is now considered deprecated. Use `useOnyx()` hook instead. +> [!warning] +> ## Deprecated Note +> Please note that the `withOnyx()` Higher Order Component (HOC) is now considered deprecated. Use `useOnyx()` hook instead. ```javascript import React from 'react'; From 4e94f2091a669d0d5517e448dca4d1ed004833e5 Mon Sep 17 00:00:00 2001 From: Kevin Brian Bader Date: Tue, 4 Jun 2024 14:42:32 -0700 Subject: [PATCH 13/13] added (long) paragraph spacing for better readability --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3bc9338c0..f82919919 100644 --- a/README.md +++ b/README.md @@ -180,7 +180,9 @@ export default withOnyx({ })(App); ``` -Additionally, if your component has many keys/entities when your component will mount but will receive many updates as data is fetched from DB and passed down to it, as every key that gets fetched will trigger a `setState` on the `withOnyx` HOC. This might cause re-renders on the initial mounting, preventing the component from mounting/rendering in reasonable time, making your app feel slow and even delaying animations. You can workaround this by passing an additional object with the `shouldDelayUpdates` property set to true. Onyx will then put all the updates in a queue until you decide when then should be applied, the component will receive a function `markReadyForHydration`. A good place to call this function is on the `onLayout` method, which gets triggered after your component has been rendered. +Additionally, if your component has many keys/entities when your component will mount but will receive many updates as data is fetched from DB and passed down to it, as every key that gets fetched will trigger a `setState` on the `withOnyx` HOC. This might cause re-renders on the initial mounting, preventing the component from mounting/rendering in reasonable time, making your app feel slow and even delaying animations. + +You can workaround this by passing an additional object with the `shouldDelayUpdates` property set to true. Onyx will then put all the updates in a queue until you decide when then should be applied, the component will receive a function `markReadyForHydration`. A good place to call this function is on the `onLayout` method, which gets triggered after your component has been rendered. ```javascript const App = ({session, markReadyForHydration}) => (