React.Component · render() · componentDidMount() · props/state · dangerouslySetInnerHTML · React is a JavaScript library for building user interfaces. This guide targets React v15 to v16.
React is a JavaScript library for building user interfaces. This guide targets React v15 to v16.
render() {
return <div />;
}
constructor(props) {
super(props);
this.state = {
list: props.initialList
};
}
// where props aren't used in constructor
constructor() {
super();
this.state = {
list: []
};
} componentWillMount() {
// invoked once.
// fires before initial 'render'
} componentDidMount() {
// good for AJAX: fetch, ajax, or subscriptions.
// invoked once (client-side only).
// fires before initial 'render'
} componentWillReceiveProps(nextProps) {
// invoked every time component recieves new props.
// does not before initial 'render'
} shouldComponentUpdate(nextProps, nextState) {
// invoked before every update (new props or state).
// does not fire before initial 'render'.
} componentWillUpdate(nextProps, nextState) {
// invoked immediately before update (new props or state).
// does not fire before initial 'render'.
// (see componentWillReceiveProps if you need to call setState)
}✖ this.setState
componentDidUpdate(prevProps, prevState) {
// invoked immediately after DOM updates
// does not fire after initial 'render'
} componentWillUnmount() {
// invoked immediately before a component is unmounted.
} // good for state transitions
this.setState((prevState, props) => {
return {count: prevState.count + props.step};
}); // good for static values
this.setState({mykey: 'my new value'});
```
setState (optional callback)
----------------------------
```js
// fires after setState
// prefer componentDidUpdate
this.setState(
(prevState, props) => ({ count: prevState.count + props.step }),
() => console.log(this.state.count)
); // forces a re-render; AVOID if possible
this.forceUpdate(); displayName: "MyComponent"
```
defaultProps
------------
```js
class Greeting extends React.Component {
render() {
return <h1>Hi {this.props.name}</h1>
}
}
CustomButton.defaultProps = {
name: 'guest'
}; React.Children.map(this.props.children, (child, i) => {
return child;
}) React.Children.forEach(this.props.children, (child, i) => {
console.log(child + ' at index: ' + i);
}) React.Children.count(this.props.children); React.Children.only(this.props.children); React.Children.toArray(this.props.children) // requires 'prop-types' library
import { string } from "prop-types";
class Cowboy extends React.Component {
childContextTypes: {
salutation: string
}
getChildContext() {
return { salutation: "Howdy" };
}
render() {
return React.Children.only(this.props.children);
}
}
const Greeting = (props, context) =>
<div>{context.salutation} {props.name}.</div>
Greeting.contextTypes = {
salutation: PropTypes.string
}
// <Greeting name="Michael" />
// => Michael.
// <Cowboy><Greeting name="Michael" /></Cowboy>
// => Howdy Michael.
// add to the context-aware component
// requires 'prop-types' library
contextTypes: {
color: PropTypes.string
}, // add to the context provider
// requires 'prop-types' library
childContextTypes: {
color: PropTypes.string
}, // add to the context provider
getChildContext() {
return {color: "purple"};
}#Components
import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
render () {
return <div className='message-box'>
Hello {this.props.name}
</div>
}
}
const el = document.body
ReactDOM.render(<Hello name='John' />, el)
Use the React.js jsfiddle to start hacking. (or the unofficial jsbin)
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
class Hello extends Component {
...
}
<Video fullscreen={true} autoplay={false} />
render () {
this.props.fullscreen
const { fullscreen, autoplay } = this.props
···
}
Use this.props to access properties passed to the component.
See: Properties
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 you can use proposal-class-fields and get rid of constructor
class Hello extends Component {
state = { username: undefined };
...
}See: States
class Info extends Component {
render () {
const { avatar, username } = this.props
return <div>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</div>
}
}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 (
<Fragment>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</Fragment>
)
}
}
Nest components to separate concerns.
See: Composing Components
<AlertBox>
<h1>You have pending notifications</h1>
</AlertBox>
class AlertBox extends Component {
render () {
return <div className='alert-box'>
{this.props.children}
</div>
}
}
Children are passed as the children property.
#Defaults
Hello.defaultProps = {
color: 'blue'
}
See: defaultProps
class Hello extends Component {
constructor (props) {
super(props)
this.state = { visible: true }
}
}
Set the default state in the constructor().
And without constructor using Babel with proposal-class-fields.
class Hello extends Component {
state = { visible: true }
}See: Setting the default state
#Other components
function MyComponent ({ name }) {
return <div className='message-box'>
Hello {name}
</div>
}
Functional components have no state. Also, their props are passed as the first parameter to a function.
See: Function and Class 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
this.forceUpdate()
this.setState({ ... })
this.setState(state => { ... })
this.state
this.props
These methods and properties are available for Component instances.
See: Component API
#Lifecycle
| Method | Description |
|---|---|
constructor (props) |
Before rendering # |
componentWillMount() |
Don’t use this # |
render() |
Render # |
componentDidMount() |
After rendering (DOM available) # |
componentWillUnmount() |
Before DOM removal # |
componentDidCatch() |
Catch errors (16+) # |
Set initial the state on constructor(). Add DOM event handlers, timers (etc) on componentDidMount(), then remove them on componentWillUnmount().
| Method | Description |
|---|---|
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
#Hooks (New)
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Hooks are a new addition in React 16.8.
See: Hooks at a Glance
function ExampleWithManyStates() {
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
}
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
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.
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);
};
}, [props.friend.id]);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
Effects may also optionally specify how to “clean up” after them by returning a function.
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
Also see: Hooks FAQ
| Hook | Description |
|---|---|
useState(initialState) |
|
useEffect(() => { … }) |
|
useContext(MyContext) |
value returned from React.createContext |
Full details: Basic Hooks
| Hook | Description |
|---|---|
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
#DOM nodes
class MyComponent extends Component {
render () {
return <div>
<input ref={el => this.input = el} />
</div>
}
componentDidMount () {
this.input.focus()
}
}
Allows access to DOM nodes.
See: Refs and the DOM
class MyComponent extends Component {
render () {
<input type="text"
value={this.state.value}
onChange={event => this.onChange(event)} />
}
onChange (event) {
this.setState({ value: event.target.value })
}
}
Pass functions to attributes like onChange.
See: Events
#Other features
<VideoPlayer src="video.mp4" />
class VideoPlayer extends Component {
render () {
return <VideoEmbed {...this.props} />
}
}
Propagates src="..." down to the sub-component.
React.createClass({ ... })
React.isValidElement(c)
ReactDOM.render(<Component />, domnode, [callback])
ReactDOM.unmountComponentAtNode(domnode)
ReactDOMServer.renderToString(<Component />)
ReactDOMServer.renderToStaticMarkup(<Component />)
There are more, but these are most common.
See: React top-level API
#JSX patterns
const style = { height: 10 }
return <div style={style}></div>
return <div style={{ margin: 0, padding: 0 }}></div>
See: Inline styles
function markdownify() { return "<p>...</p>"; }
<div dangerouslySetInnerHTML={{__html: markdownify()}} />
See: Dangerously set innerHTML
class TodoList extends Component {
render () {
const { items } = this.props
return <ul>
{items.map(item =>
<TodoItem item={item} key={item.key} />)}
</ul>
}
}
Always supply a key property.
<Fragment>
{showMyComponent
? <MyComponent />
: <OtherComponent />}
</Fragment>
<Fragment>
{showPopup && <Popup />}
...
</Fragment>
#New features
You can return multiple elements as arrays or fragments.
render () {
return [
<li key="A">First item</li>,
<li key="B">Second item</li>
]
}
render () {
return (
<Fragment>
<li>First item</li>
<li>Second item</li>
</Fragment>
)
}
render() {
return 'Look ma, no spans!';
}
You can return just a string.
class MyComponent extends Component {
···
componentDidCatch (error, info) {
this.setState({ error })
}
}
Catch errors via componentDidCatch. (React 16+)
See: Error handling in React 16
render () {
return React.createPortal(
this.props.children,
document.getElementById('menu')
)
}
This renders this.props.children into any location in the DOM.
See: Portals
const el = document.getElementById('app')
ReactDOM.hydrate(<App />, el)
Use ReactDOM.hydrate instead of using ReactDOM.render if you’re rendering over the output of ReactDOMServer.
See: Hydrate
#Property validation
import PropTypes from 'prop-types'
See: Typechecking with PropTypes
| Key | Description |
|---|---|
any |
Anything |
| Key | Description |
|---|---|
string |
|
number |
|
func |
Function |
bool |
True or false |
| Key | Description |
|---|---|
oneOf(any) |
Enum types |
oneOfType(type array) |
Union |
| Key | Description |
|---|---|
array |
|
arrayOf(…) |
| Key | Description |
|---|---|
object |
|
objectOf(…) |
Object with values of a certain type |
instanceOf(…) |
Instance of a class |
shape(…) |
| Key | Description |
|---|---|
element |
React element |
node |
DOM node |
| Key | Description |
|---|---|
(···).isRequired |
Required |
MyComponent.propTypes = {
email: PropTypes.string,
seats: PropTypes.number,
callback: PropTypes.func,
isClosed: PropTypes.bool,
any: PropTypes.any
}
MyCo.propTypes = {
name: PropTypes.string.isRequired
}
MyCo.propTypes = {
element: PropTypes.element,
node: PropTypes.node
}
MyCo.propTypes = {
direction: PropTypes.oneOf([
'left', 'right'
])
}
MyCo.propTypes = {
list: PropTypes.array,
ages: PropTypes.arrayOf(PropTypes.number),
user: PropTypes.object,
user: PropTypes.objectOf(PropTypes.number),
message: PropTypes.instanceOf(Message)
}
MyCo.propTypes = {
user: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
})
}
Use .array[Of], .object[Of], .instanceOf, .shape.
MyCo.propTypes = {
customProp: (props, key, componentName) => {
if (!/matchme/.test(props[key])) {
return new Error('Validation failed!')
}
}
}