React 16.6.0 is out

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.

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>
  );
});