Merge branch 'website'

Author: timdorr

FAQ.md

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

packages/react-router/docs/api/withRouter.md

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

packages/react-router/docs/guides/blocked-updates.md

@@ -258,3 +258,40 @@ h3 {
   opacity: 1;
   transition: opacity 250ms ease-in;
 }
+
+/* Just some temporary CSS for our hooks tour ad */
+
+.hooks-tour {
+  padding: 1.5em;
+  background-image: url(https://reacttraining.com/images/blue-fade.svg),
+    url(https://reacttraining.com/images/blue-fade.svg);
+  background-position: 50% 0, 0 -20%;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-color: #edf4f7;
+  border: 1px solid #d3dbde;
+  text-align: center;
+  border-radius: 0.5em;
+}
+
+.hooks-tour .logo {
+  width: 60%;
+}
+
+.hooks-tour a {
+  display: inline-block;
+  margin: 0.2em 0;
+  padding: 0.2em 0.5em;
+  background-color: #e94948;
+  color: #fff;
+  border-radius: 0.2em;
+}
+
+.hooks-tour hr {
+  border: none;
+  border-bottom: 1px solid #d3dbde;
+}
+
+.hooks-tour p:last-of-type {
+  font-size: 0.7em;
+}

website/modules/base.css

@@ -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;