Skip to content

Commit

Permalink
Merge pull request #12 from reactjs/sync-99e97c33
Browse files Browse the repository at this point in the history
Sync with reactjs.org @ 99e97c3
  • Loading branch information
22mahmoud committed Feb 16, 2019
2 parents 3f14dc7 + b86cc14 commit cd6ca87
Show file tree
Hide file tree
Showing 7 changed files with 13 additions and 13 deletions.
2 changes: 1 addition & 1 deletion content/docs/codebase-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ Its main goals are:
* Ability to return multiple elements from `render()`.
* Better support for error boundaries.

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.
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.

Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).

Expand Down
4 changes: 2 additions & 2 deletions content/docs/higher-order-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);

Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

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).
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).

In this document, we'll discuss why higher-order components are useful, and how to write your own.

Expand Down Expand Up @@ -396,4 +396,4 @@ import MyComponent, { someFunction } from './MyComponent.js';

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.

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).
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).
10 changes: 5 additions & 5 deletions content/docs/hooks-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). Th
**↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations.

## 📌 State Hook {#-state-hook}
## 📌 State Hook {#state-hook}

This example renders a counter. When you click the button, it increments the value:

Expand Down Expand Up @@ -68,7 +68,7 @@ React provides a few built-in Hooks like `useState`. You can also create your ow
>
>You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html).
## ⚡️ Effect Hook {#️-effect-hook}
## ⚡️ Effect Hook {#effect-hook}

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.

Expand Down Expand Up @@ -159,7 +159,7 @@ Hooks let you organize side effects in a component by what pieces are related (s
>
>You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html).
## ✌️ Rules of Hooks {#️-rules-of-hooks}
## ✌️ Rules of Hooks {#rules-of-hooks}

Hooks are JavaScript functions, but they impose two additional rules:

Expand All @@ -172,7 +172,7 @@ We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-h
>
>You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html).
## 💡 Building Your Own Hooks {#-building-your-own-hooks}
## 💡 Building Your Own Hooks {#building-your-own-hooks}

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.

Expand Down Expand Up @@ -239,7 +239,7 @@ You can write custom Hooks that cover a wide range of use cases like form handli
>
>You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html).
## 🔌 Other Hooks {#-other-hooks}
## 🔌 Other Hooks {#other-hooks}

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:

Expand Down
2 changes: 1 addition & 1 deletion content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ function reducer(state, action) {
}
}

function Counter({initialCount}) {
function Counter({initialState}) {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@
"normalize.css": "^8.0.0",
"prettier": "^1.7.4",
"prismjs": "^1.15.0",
"react": "16.7.0-alpha.0",
"react-dom": "16.7.0-alpha.0",
"react": "16.8.2",
"react-dom": "16.8.2",
"react-helmet": "^5.2.0",
"react-live": "1.8.0-0",
"remarkable": "^1.7.1",
Expand Down
2 changes: 1 addition & 1 deletion src/components/LayoutFooter/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
color: colors.subtleOnDark,
paddingTop: 15,
}}>
Copyright © 2018 Facebook Inc.
Copyright © 2019 Facebook Inc.
</p>
</section>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/site-constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
// NOTE: We can't just use `location.toString()` because when we are rendering
// the SSR part in node.js we won't have a proper location.
const urlRoot = 'https://reactjs.org';
const version = '16.8.1';
const version = '16.8.2';
const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';

export {urlRoot, version, babelURL};

0 comments on commit cd6ca87

Please sign in to comment.