What’s new 16.6.0 +
It's a minor release with major features focused on performance optimization
-
React.memo()
-
React.lazy()
-
static contextType()
With 16.6, you can now declare a contextType in a component and then access this.context to get the context from your provider without having to pass down render props.
It’s important to note that the context value is from the closest matching Provider above your current component in the tree.
This means you’ll still have to wrap your entire app (or at least the current component) in your Provider, but then that provider is easily accessed with this.context
Memo API is essentially a wrapper / higher-order component that provides the benefits of a Pure Component for function components.
Pure Components can provide a performance boost by preventing a component from re-rendering if the props don’t change.
If you’re using deeply nested data PureComponent will only do a shallow check for performance reasons, so try to limit it to simple data or use immutable objects.
React.lazy() and Suspense
Code-splitting allows us to lazy-load our imports, which means we only import them when they are being used hence increasing the overall speed of our applications. These are referred to as dynamic imports.
React.lazy() allows us to render dynamic imports as regular components.It takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.
import OtherComponent from './OtherComponent';
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
// with React 16.6.0
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
// Notice all we have to do is update the import statement!
// Very easy to implement and similar to how react-loadable does it.// React Suspense
// In case MyComponent renders before our dynamic import,
// we should show some fallback content to act as a placeholder as we wait for it to load,
// such as a loader. This can be achieved using the higher order Suspense component.
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}React 16.7.0 (now alpha)
React Hooks were introduced at React Conf October 2018 as proposal for React 16.7. as a way to use state and side-effects in React function components. Whereas function components have been called functional stateless components (FSC) before, they are finally able to use state with React Hooks.
The React team is collecting feedback for React Hooks
React Hooks were invented by the React team to introduce state management and side-effects in function components. It’s their way of making it more effortless to use only React function components without the need to refactor a React function component to a React class component for using lifecycle methods, in order to use have side-effects, or local state. React Hooks enable us to write React applications with only function components.
import React from 'react';
class Counter extends React.Component {
state = {
count: 0,
};
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button
onClick={() =>
this.setState({ count: this.state.count + 1 })
}
>
Click me
</button>
</div>
);
}
}
export default Counter;import React, { useState } from 'react';
// how to use the state hook in a React function component
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;// side-effects in a React class component
class MyComponent extends Component {
componentDidMount() {
// add listener for feature 1
}
componentWillUnmount() {
// remove listener for feature 1
}
...
}
// side-effects in React function component with React Hooks
function MyComponent() {
useEffect(() => {
// add listener for feature 1 (setup)
// return function to remove listener for feature 1 (clean up)
});
...
}React Hooks
Useful Links
https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349
https://scotch.io/bar-talk/whats-new-in-react-166
https://www.robinwieruch.de/react-hooks/
https://www.hooks.guide/react-use/useSetstate
https://dev.to/kayis/react-hooks-demystified-2af6
What’s new in React 16
By Michal Danco
