nicolas restrepo
javascript developer
Cleaner React With Hooks and others features (16.6) and (16.7)
React v16.6
Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.
resource from: https://reactjs.org/
import React from 'react'
function MyComponent({name}){
return (
<React.Fragment>
hi {name} welcome to bogota.js
</React.Fragment>
)
}
export default memo(MyComponent)
// or
export deafult memo(MyComponent, (prevProps, nextProps) => {
return prevProps.name !== nextProps.name;
});React.lazy: Code-Splitting with Suspense
This new function, which is incorporated into the React core, allows to make code split and lazy load of React component. Something that until now was possible using libraries like react-loadable or next / dynamic (from Next.js).
Title Text
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}Text
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}class MyClass extends React.Component {
static contextType = MyContext;
componentDidMount() {
let value = this.context;
/* perform a side-effect at mount using the value of MyContext */
}
componentDidUpdate() {
let value = this.context;
/* ... */
}
componentWillUnmount() {
let value = this.context;
/* ... */
}
render() {
let value = this.context;
/* render something based on the value of MyContext */
}
}No Breaking Changes
100% backwards-compatible 😎
Completely opt-in.
DEMO
deck
By nicolas restrepo
