amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-23 20:23:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Beta] Reusing Logic with Custom Hooks (#4958)

Browse Source
This commit is contained in:
dan
2022-09-02 01:04:07 +01:00
committed by GitHub
parent 4b5c413054
commit 59c68a7baf
3 changed files with 1412 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
beta/src/pages/learn/removing-effect-dependencies.md
View File

@@ -547,7 +547,7 @@ function ShippingForm({ country }) {
Now the first Effect only re-runs if the `country` changes, while the second Effect re-runs when the `city` changes. You've separated them by purpose: two different things are synchronized by two separate Effects. Two separate Effects have two separate dependency lists, so they will no longer trigger each other unintentionally.
The final code is longer than the original, but splitting these Effects is still correct. [Each Effect should represent an independent synchronization process.](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) In this example, deleting one Effect doesn't break the other Effect's logic. This is a good indication that they *synchronize different things,* and it made sense to split them up.
The final code is longer than the original, but splitting these Effects is still correct. [Each Effect should represent an independent synchronization process.](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) In this example, deleting one Effect doesn't break the other Effect's logic. This is a good indication that they *synchronize different things,* and it made sense to split them up. If the duplication feels concerning, you can further improve this code by [extracting repetitive logic into a custom Hook.](/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks)
### Are you reading some state to calculate the next state? {/*are-you-reading-some-state-to-calculate-the-next-state*/}

1407
beta/src/pages/learn/reusing-logic-with-custom-hooks.md Normal file
View File

File diff suppressed because it is too large Load Diff

4
beta/src/sidebarLearn.json
View File

@@ -182,6 +182,10 @@
{
"title": "Removing Effect Dependencies",
"path": "/learn/removing-effect-dependencies"
},
{
"title": "Reusing Logic with Custom Hooks",
"path": "/learn/reusing-logic-with-custom-hooks"
}
]
}