React 16.6.0 is out
Notable new features:
lazy loading - dynamic imports (no support for SSR yet though)
memo - re-render for function components only if props change
static contextType - use the context value within component lifecycle methods easily
Complete updates here: https://reactjs.org/blog/2018/10/23/react-v-16-6.html
8 Likes
Anyone know how the new React.lazy is working with code splitting in Meteor? I’m currently using React Loadable, wondering if there is any benefit to changing (we don’t do any server-side rendering for the moment).
2 Likes
I’ll be experimenting with this shortly.
edit: replaced react-loadable
with it and it’s working fine.
tarmes
October 25, 2018, 1:33pm
4
A nice update. I’ve updated my Meteor/React/Apollo starter-kit to use the latest version.
Unfortunately I’ll have to stick with react-loadable until SSR is supported natively.
1 Like
Did some psuedo tree-shaking react stuff you might get a kick outta
// index.jsx
import React, { lazy, Suspense } from 'react';
import LoadingAnimation from '/imports/ui/components/LoadingAnimation';
const asyncLoadableTabs = {
RedactedComponent1: lazy(() => import('./RedactedComponent1')),
RedactedComponent2: lazy(() => import('./RedactedComponent2')),
RedactedComponent3: lazy(() => import('./RedactedComponent3')),
RedactedComponent4: lazy(() => import('./RedactedComponent4')),
RedactedComponent5: lazy(() => import('./RedactedComponent5')),
RedactedComponent6: lazy(() => import('./RedactedComponent6')),
};
Object.keys(asyncLoadableTabs).forEach(componentName => {
const Component = asyncLoadableTabs[componentName];
exports[componentName] = props => (
<Suspense fallback={<LoadingAnimation timeout={300} />}>
<Component {...props} />
</Suspense>
);
});