layout: 2017/sheet
ads: true
tags: [Featured]
-updated: 2020-07-04
+updated: 2020-07-05
weight: -10
keywords:
- React.Component
```jsx
class Hello extends Component {
- state = { visible: true }
- }
+ state = { visible: true }
}
```
{: data-line="2"}
{: .-two-column}
### Mounting
+
| Method | Description |
| ------------------------ | ---------------------------------------------------------------------------------------------------- |
| `constructor` _(props)_ | Before rendering [#](https://reactjs.org/docs/react-component.html#constructor) |
Add DOM event handlers, timers (etc) on `componentDidMount()`, then remove them on `componentWillUnmount()`.
### Updating
+
| Method | Description |
| ------------------------------------------------------- | ---------------------------------------------------- |
| `componentDidUpdate` _(prevProps, prevState, snapshot)_ | Use `setState()` here, but remember to compare props |