Issue 1:
Duplicate of : #14583

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Issue loading the js chunk files on IE11 (only). With the latest version of react 16.7.0 our app (which uses Suspense and Lazy) doesn't load all the needed js chunks. You need to navigate around the app to request other js chunks and eventually the app is fully loaded.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

We have a routes.js file with all the routes of the app. It looks like this:

const Organisation = lazy(() => import('./pages/Organisation'));
const Services = lazy(() => import('./pages/Services'));
// all the other dynamic imports go here
// ...
const Page404 = lazy(() => import('./pages/Page404'));

export default (
<ErrorBoundary>
<Suspense fallback={<span />}>
<Switch>
<Redirect exact from="/" to="/organisation" />
<Route path="/organisation" component={Organisation} />
<Route path="/services" component={Services} />
<!-- All the other routes -->
<Route path="*" component={Page404} />
</Switch>
</Suspense>
</ErrorBoundary>
);

The route "/" is redirected to "/organisation" which returns the "Organisation" component. However, the Organisation component is not rendered, the chunk hasn't been requested on demand. If we navigate to "/services" the services chunk is requested on demand and loaded well. Then, if we go back to "/organisation" all is fine.

There are no shown errors at all.

What is the expected behavior?

The js chunks are requested on demand loaded and the components are rendered when we initially load the app.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This worked in all previous version of React that we tried since Lazy and Suspense was released in 16.3.0

React version: 16.7.0

OS: Win7

Browser: IE11

Issue 2:
Do you want to request a feature or report a bug?

feature(maybe more like a discussion)

What is the current behavior?

Assume that we have one custom hook:

/* Typing with TS */
// to make this example reasonable,
// assuming that `fetchUser` and `fetchOrders` fetch data from different backends.
function useOrders(): Order[] {
const [orders, setOrders] = useState<Order[]>([]);
useEffect(() => {
fetchUser().then(user =>
fetchOrders(user).then(theOrders => setOrders(theOrders)),
);
}, []);
return orders;
}

It works perfectly, but in other parts of application, I also need to fetch the user data, so I think I should split useOrders into two custom hooks to make the process of fetching user reusable:

/* Typing with TS */

// before the backend responsing, the returned user is `null`
function useUser(): User | null {
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
fetchUser().then(theUser => setUser(theUser));
}, []);
return user;
}

function useOrders(user: User): Order[] {
const [orders, setOrders] = useState<Order[]>([]);
useEffect(() => {
fetchOrders(user).then(theOrders => setOrders(theOrders));
}, [user]);
return orders;
}

But the two custom hooks can not work together properly:

function SomeComponent() {
const user = useUser();
// when user data is still fetching, the user will be null,
// so the next line will throw error(typing and runtime)
const orders = useOrders(user);
}

Maybe I can determin whether the user is null inside useOrders, but it is hard to explain the meaning of useOrders(null). Why should useOrders accepts null?

So my solution is to wrap the component:

function SomeComponent({ user }: { user: User }) {
const orders = useOrders(user);
}

function Wrapper() {
const user = useUser();
if (user === null) {
return null;
}
return <SomeComponent user={user} />;
}

export default Wrapper;

I often fell into this hell when I tried to refactor existing code.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

I don't know, maybe a discussion is needed.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React >= 16.8.0

any supported browsers