) ``` ## Static Methods ```jsx // Returning object = New props require state update // Returning null = New props do not require state update class MyComponent extends React.Component { static getDerivedStateFromProps(props, state) {...} state = {...} } // Return value is passed as 3rd argument to componentDidUpdate class MyComponent extends React.Component { static getSnapshotBeforeUpdate(prevProps, prevState) {...} } // Listening to context from a class component import SomeContext from '../SomeContext' class MyCompmonent extends React.Component { static contextType = SomeContext componentDidMount() { console.log(this.context) } } // Enables rendering fallback UI before render completes class MyComponent extends React.Component { state getDerivedStateFromError() {...} state = { error: null } componentDidCatch(error, info) {...} } ``` ## Component States ```jsx // Class component state class MyComponent extends React.Component { state = { loaded: false } componentDidMount = () => this.setState({ loaded: true }) render() { if (!this.state.loaded) return null return

} } // Function component state (useState/useReducer) const MyComponent = (props) => { // With useState const [loaded, setLoaded] = React.useState(false) // With useReducer const [state, dispatch] = React.useReducer(reducer, initialState) if (!loaded) return null React.useEffect(() => void setLoaded(true)) return

``` ## Rendering Components ```jsx // Ways to render Card const Card = (props) =>

const App = ({ items = [] }) => { const renderCard = (props) => return items.map(renderCard) // or return items.map((props) => renderCard(props)) } const App = (props) => class App extends React.Component { render() { return } } const MyComp = ({ component: Component }) => const App = () => ``` ## Default Props ```jsx // Function component const MyComponent = (props) =>

MyComponent.defaultProps = { fruit: 'apple' } // Class component class MyComponent extends React.Component { static defaultProps = { fruit: 'apple' } render() { return

} } ``` ## Other React Exports ```jsx // createContext (React v16.3) const WeatherContext = React.createContext({ day: 3 }) const App = ({ children }) => { const [weather, setWeather] = React.useState(null) const [error, setError] = React.useState(null) React.useEffect(() => { api.getWeather(...) .then(setWeather) .catch(setError) }, []) const contextValue = { weather, error } return ( {children} ) } const SomeChild = () => { const { weather } = React.useContext(WeatherContext) console.log(weather) return null } // createRef (Obtain a reference to a react node) (React v16.3) const App = () => { const ref = React.createRef() React.useEffect(() => { console.log(ref.current) }, []) return

} // forwardRef (Pass the ref down to a child) (React v16.3) const Remote = React.forwardRef((props, ref) => (

)) const App = () => { const ref = React.createRef() return } // memo (Optimize your components to avoid wasteful renders) (React v16.6) const App = () => {...} const propsAreEqual = (props, nextProps) => { return props.id === nextProps.id } // Does not re-render if id is the same export default React.memo(App, propsAreEqual) ``` ## Importing ```jsx // default export const App = (props) =>

export default App import App from './App' // named export export const App = (props) =>

import { App } from './App' ``` ## Pointer Events (React v16.4) ```jsx onPointerUp onPointerDown onPointerMove onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut const App = () => { const onPointerDown = (e) => console.log(e.pointerId) return

} ``` ## React Suspense/Lazy (React v16.6) ```jsx // lazy -> Dynamic import. Reduces bundle size // + Code splitting const MyComponent = React.lazy(() => import('./MyComponent)) const App = () => // Suspend rendering while components are waiting for something // + Code splitting import LoadingSpinner from '../LoadingSpinner' const App = () => ( }> ) ``` ## React Profiler (React v16.9) ```jsx const App = () => (

) ``` ## Synchronous / Asynchronous `act` Test Utility (React v16.9) ```jsx import { act } from 'react-dom/test-utils' import MyComponent from './MyComponent' const container = document.createElement('div') // Synchronous it('renders and adds new item to array', () => { act(() => { ReactDOM.render(, container) }) const btn = container.querySelector('button') expect(btn.textContent).toBe('one item') act(() => { button.dispatchEvent(new MouseEvent('click', { bubbles: true })) }) expect(btn.textContent).toBe('two items') }) // Asynchronous it('does stuff', async () => { await act(async () => { // code }) }) ``` [Bring me to the cheat sheet](https://jsmanifest.com/react-cheatsheet) ## Conclusion And that concludes the end of this post! I hope you found this to be useful and look out for more in the future!

Posts tagged “png”

This React Cheatsheet Includes All of v16+