# References for Using React
By [coinvest](https://paragraph.com/@coinvest) · 2023-09-19
---
A handy, quick reference for me (and everyone) to come back to when working with React. Sourced from: [**rstacruz / cheatsheets**](https://github.com/rstacruz/cheatsheets/blob/master/react.md).
### Components
`import React from 'react' import ReactDOM from 'react-dom'`
`class Hello extends React.Component { render () { return
Hello {this.props.name}
} }`
`const el = document.body ReactDOM.render(, el)`
Use the [**React.js jsfiddle**](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [**jsbin**](http://jsbin.com/yafixat/edit?js,output))
### Import multiple exports
`import React, {Component} from 'react' import ReactDOM from 'react-dom'`
`class Hello extends Component { ... }`
### Properties
``
`render () { this.props.fullscreen const { fullscreen, autoplay } = this.props ··· }`
Use `this.props` to access properties passed to the component.
See: [**Properties**](https://reactjs.org/docs/tutorial.html#using-props)
### States
`constructor(props) { super(props) this.state = { username: undefined } }`
`this.setState({ username: 'rstacruz' })`
`render () { this.state.username const { username } = this.state ··· }`
Use states (`this.state`) to manage dynamic data.
With [**Babel**](https://babeljs.io/) you can use [**proposal-class-fields**](https://github.com/tc39/proposal-class-fields) and get rid of constructor
`class Hello extends Component { state = { username: undefined }; ... }`
See: [**States**](https://reactjs.org/docs/tutorial.html#reactive-state)
### Nesting
`class Info extends Component { render () { const { avatar, username } = this.props return
} }`
As of React v16.2.0, fragments can be used to return multiple children without adding extra wrapping nodes to the DOM.
`import React, { Component, Fragment } from 'react' class Info extends Component { render () { const { avatar, username } = this.props return ( ) } }`
Nest components to separate concerns.
See: [**Composing Components**](https://reactjs.org/docs/components-and-props.html#composing-components)
### Children
`
} }`
Children are passed as the `children` property.
Defaults
--------
### Setting default props
`Hello.defaultProps = { color: 'blue' }`
See: [**defaultProps**](https://reactjs.org/docs/react-component.html#defaultprops)
### Setting default state
`class Hello extends Component { constructor (props) { super(props) this.state = { visible: true } } }`
Set the default state in the `constructor()`.
And without constructor using [**Babel**](https://babeljs.io/) with [**proposal-class-fields**](https://github.com/tc39/proposal-class-fields).
`class Hello extends Component { state = { visible: true } } }`
See: [**Setting the default state**](https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state)
Other components
----------------
### Functional components
`function MyComponent ({ name }) { return
Hello {name}
}`
Functional components have no state. Also, their `props` are passed as the first parameter to a function.
See: [**Function and Class Components**](https://reactjs.org/docs/components-and-props.html#functional-and-class-components)
### Pure components
`import React, {PureComponent} from 'react' class MessageBox extends PureComponent { ··· }`
Performance-optimized version of `React.Component`. Doesn’t rerender if props/state hasn’t changed.
See: [**Pure components**](https://reactjs.org/docs/react-api.html#react.purecomponent)
### Component API
`this.forceUpdate()`
`this.setState({ ... }) this.setState(state => { ... })`
`this.state this.props`
These methods and properties are available for `Component` instances.
See: [**Component API**](http://facebook.github.io/react/docs/component-api.html)
Lifecycle
---------
### Mounting
MethodDescription`constructor` \*(props)\*Before rendering [**#**](https://reactjs.org/docs/react-component.html#constructor)`componentWillMount()`_Don’t use this_ [**#**](https://reactjs.org/docs/react-component.html#componentwillmount)`render()`Render [**#**](https://reactjs.org/docs/react-component.html#render)`componentDidMount()`After rendering (DOM available) [**#**](https://reactjs.org/docs/react-component.html#componentdidmount)\------`componentWillUnmount()`Before DOM removal [**#**](https://reactjs.org/docs/react-component.html#componentwillunmount)\------`componentDidCatch()`Catch errors (16+) [**#**](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html)
Set initial the state on `constructor()`. Add DOM event handlers, timers (etc) on `componentDidMount()`, then remove them on `componentWillUnmount()`.
### Updating
MethodDescription`componentDidUpdate` \*(prevProps, prevState, snapshot)\*Use `setState()` here, but remember to compare props`shouldComponentUpdate` \*(newProps, newState)\*Skips `render()` if returns false`render()`Render`componentDidUpdate` \*(prevProps, prevState)\*Operate on the DOM here
Called when parents change properties and `.setState()`. These are not called for initial renders.
See: [**Component specs**](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops)
Hooks (New)
-----------
### State Hook
`import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return (
You clicked {count} times
); }`
Hooks are a new addition in React 16.8.
See: [**Hooks at a Glance**](https://reactjs.org/docs/hooks-overview.html)
### Declaring multiple state variables
`function ExampleWithManyStates() { // Declare multiple state variables! const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); // ... }`
### Effect hook
``import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); return (
You clicked {count} times
); }``
If you’re familiar with React class lifecycle methods, you can think of `useEffect` Hook as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` combined.
By default, React runs the effects after every render — including the first render.
### Building your own hooks
#### Define FriendStatus
`import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }`
Effects may also optionally specify how to “clean up” after them by returning a function.
#### Use FriendStatus
`function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }`
See: [**Building Your Own Hooks**](https://reactjs.org/docs/hooks-custom.html)
### Hooks API Reference
Also see: [**Hooks FAQ**](https://reactjs.org/docs/hooks-faq.html)
#### Basic Hooks
HookDescription`useState`_(initialState)_`useEffect`_(() => { … })_`useContext`\*(MyContext)\*value returned from `React.createContext`
Full details: [**Basic Hooks**](https://reactjs.org/docs/hooks-reference.html#basic-hooks)
#### Additional Hooks
HookDescription`useReducer`_(reducer, initialArg, init)_`useCallback`_(() => { … })_`useMemo`_(() => { … })_`useRef`_(initialValue)_`useImperativeHandle`_(ref, () => { … })_`useLayoutEffect`identical to `useEffect`, but it fires synchronously after all DOM mutations`useDebugValue`\*(value)\*display a label for custom hooks in React DevTools
Full details: [**Additional Hooks**](https://reactjs.org/docs/hooks-reference.html#additional-hooks)
DOM nodes
---------
### References
`class MyComponent extends Component { render () { return
this.input = el} />
} componentDidMount () { this.input.focus() } }`
Allows access to DOM nodes.
See: [**Refs and the DOM**](https://reactjs.org/docs/refs-and-the-dom.html)
### DOM Events
`class MyComponent extends Component { render () { this.onChange(event)} /> } onChange (event) { this.setState({ value: event.target.value }) } }`
Pass functions to attributes like `onChange`.
See: [**Events**](https://reactjs.org/docs/events.html)
Other features
--------------
### Transferring props
``
`class VideoPlayer extends Component { render () { return } }`
Propagates `src="..."` down to the sub-component.
See [**Transferring props**](http://facebook.github.io/react/docs/transferring-props.html)
### Top-level API
`React.createClass({ ... }) React.isValidElement(c)`
`ReactDOM.render(, domnode, [callback]) ReactDOM.unmountComponentAtNode(domnode)`
`ReactDOMServer.renderToString() ReactDOMServer.renderToStaticMarkup()`
There are more, but these are most common.
See: [**React top-level API**](https://reactjs.org/docs/react-api.html)
JSX patterns
------------
### Style shorthand
`const style = { height: 10 } return `
`return `
See: [**Inline styles**](https://reactjs.org/tips/inline-styles.html)
### Inner HTML
`function markdownify() { return "