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