Skip to content

Instantly share code, notes, and snippets.

Avatar
🧭
Building @code-hike

Rodrigo Pombo pomber

🧭
Building @code-hike
View GitHub Profile
View lazy-with-preload.js
function lazyWithPreload(factory) {
const Component = React.lazy(factory);
Component.preload = factory;
return Component;
}
const StockChart = lazyWithPreload(() => import("./StockChart"));
// somewhere in your component
...
View App.jsx
class App extends React.Component {
state = {
selectedStock: null
};
render() {
const { stocks } = this.props;
const { selectedStock } = this.state;
return (
<React.Suspense fallback={<div>Loading...</div>}>
<StockTable
View App.jsx
const stockChartPromise = import("./StockChart");
const StockChart = React.lazy(() => stockChartPromise);
View __.babelrc
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}
View App.jsx
import React from "react";
import StockTable from "./StockTable";
import StockChart from "./StockChart";
class App extends React.Component {
state = {
selectedStock: null
};
render() {
View suspense.jsx
import React from "react";
import ReactDOM from "react-dom";
import fetchWithCache from "./cache";
function Post({ postId }) {
const post = fetchWithCache(
"https://jsonplaceholder.typicode.com/posts/" + postId
);
return (
<div>
View componentDidMount.jsx
import React from "react";
import ReactDOM from "react-dom";
class Post extends React.Component {
state = {
loading: true,
post: null
};
componentDidMount() {
const { postId } = this.props;
View memo.jsx
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
View __.babelrc
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}