Skip to content

Commit

Permalink
Removing "update blocking" content (#6652)
Browse files Browse the repository at this point in the history
* update react and start using hooks in some places

* remove content for blocked updates
  • Loading branch information
bradwestfall authored and timdorr committed May 15, 2019
1 parent 65ca0ae commit 97f0eee
Show file tree
Hide file tree
Showing 11 changed files with 110 additions and 353 deletions.
5 changes: 0 additions & 5 deletions FAQ.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,11 @@ This is a list of support questions that frequently show up in GitHub issues. Th

If there is a support question that you frequently see being asked, please open a PR to add it to this list.

- [Why aren't my components updating when the location changes?](#why-arent-my-components-updating-when-the-location-changes)
- [Why doesn't my application render after refreshing?](#why-doesnt-my-application-render-after-refreshing)
- [Why doesn't my application work when loading nested routes?](#why-doesnt-my-application-work-when-loading-nested-routes)
- [How do I access the `history` object outside of components?](#how-do-i-access-the-history-object-outside-of-components)
- [How do I pass props to the component rendered by a `<Route>`?](#how-do-i-pass-props-to-the-component-rendered-by-a-route)

### Why aren't my components updating when the location changes?

React Router relies on updates propagating from your router component to every child component. If you (or a component you use) implements `shouldComponentUpdate` or is a `React.PureComponent`, you may run into issues where your components do not update when the location changes. For a detailed review of the problem, please see the [blocked updates guide](packages/react-router/docs/guides/blocked-updates.md).

### Why doesn't my application render after refreshing?

If your application is hosted on a static file server, you need to use a `<HashRouter>` instead of a `<BrowserRouter>`.
Expand Down
22 changes: 1 addition & 21 deletions packages/react-router/docs/api/withRouter.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,27 +29,7 @@ const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

#### Important Note

`withRouter` does not subscribe to location changes like React Redux's `connect` does for state changes. Instead, re-renders after location changes propagate out from the `<Router>` component. This means that `withRouter` does _not_ re-render on route transitions unless its parent component re-renders. If you are using `withRouter` to prevent updates from being blocked by `shouldComponentUpdate`, it is important that `withRouter` wraps the component that implements `shouldComponentUpdate`. For example, when using Redux:

```js
// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))
// or
compose(
withRouter,
connect(...)
)(MyComponent)

// This does not
connect(...)(withRouter(MyComponent))
// nor
compose(
connect(...),
withRouter
)(MyComponent)
```

See [this guide](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md) for more information.
`withRouter` does not subscribe to location changes like React Redux's `connect` does for state changes. Instead, re-renders after location changes propagate out from the `<Router>` component. This means that `withRouter` does _not_ re-render on route transitions unless its parent component re-renders.

#### Static Methods and Properties

Expand Down
200 changes: 0 additions & 200 deletions packages/react-router/docs/guides/blocked-updates.md

This file was deleted.

38 changes: 12 additions & 26 deletions website/modules/components/Bundle.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,18 @@
import React, { Component } from "react";
import { useState, useEffect } from "react";

class Bundle extends Component {
state = {
mod: null
};
function Bundle({ children, load }) {
const [mod, setMod] = useState();

componentWillMount() {
this.load(this.props);
}
useEffect(
() => {
load(mod => {
setMod(mod.default ? mod.default : mod);
});
},
[load]
);

componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps);
}
}

load(props) {
this.setState({
mod: null
});
props.load(mod => {
this.setState({ mod: mod.default ? mod.default : mod });
});
}

render() {
return this.props.children(this.state.mod);
}
return children(mod);
}

export default Bundle;
Loading

0 comments on commit 97f0eee

Please sign in to comment.