You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/codebase-overview.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -211,7 +211,7 @@ Its main goals are:
211
211
* Ability to return multiple elements from `render()`.
212
212
* Better support for error boundaries.
213
213
214
-
You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/index.php/2018/11/29/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet.
214
+
You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e). While it has shipped with React 16, the async features are not enabled by default yet.
215
215
216
216
Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).
Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
16
16
17
-
HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
17
+
HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api/connect.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
18
18
19
19
In this document, we'll discuss why higher-order components are useful, and how to write your own.
While the convention for higher-order components is to pass through all props to the wrapped component, this does not work for refs. That's because `ref` is not really a prop — like `key`, it's handled specially by React. If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
398
398
399
-
The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
399
+
The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
Copy file name to clipboardExpand all lines: content/docs/hooks-overview.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -16,7 +16,7 @@ Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). Th
16
16
17
17
**↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations.
18
18
19
-
## 📌 State Hook {#-state-hook}
19
+
## 📌 State Hook {#state-hook}
20
20
21
21
This example renders a counter. When you click the button, it increments the value:
22
22
@@ -68,7 +68,7 @@ React provides a few built-in Hooks like `useState`. You can also create your ow
68
68
>
69
69
>You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html).
70
70
71
-
## ⚡️ Effect Hook {#️-effect-hook}
71
+
## ⚡️ Effect Hook {#effect-hook}
72
72
73
73
You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering.
74
74
@@ -159,7 +159,7 @@ Hooks let you organize side effects in a component by what pieces are related (s
159
159
>
160
160
>You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html).
161
161
162
-
## ✌️ Rules of Hooks {#️-rules-of-hooks}
162
+
## ✌️ Rules of Hooks {#rules-of-hooks}
163
163
164
164
Hooks are JavaScript functions, but they impose two additional rules:
165
165
@@ -172,7 +172,7 @@ We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-h
172
172
>
173
173
>You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html).
174
174
175
-
## 💡 Building Your Own Hooks {#-building-your-own-hooks}
175
+
## 💡 Building Your Own Hooks {#building-your-own-hooks}
176
176
177
177
Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree.
178
178
@@ -239,7 +239,7 @@ You can write custom Hooks that cover a wide range of use cases like form handli
239
239
>
240
240
>You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html).
241
241
242
-
## 🔌 Other Hooks {#-other-hooks}
242
+
## 🔌 Other Hooks {#other-hooks}
243
243
244
244
There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting:
0 commit comments