Notes for starting React
These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
This method is called when a component is being removed from the DOM:
- componentWillUnmount()
These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.
- static getDerivedStateFromError()
- componentDidCatch()
keywords: connected-react-router, redux-saga
Reasons: withRouter does not subscribe to location changes like React Redux’s connect does for state changes. Instead, re-renders after location changes propagate out from the component. This means that withRouter does not re-render on route transitions unless its parent component re-renders. If you are using withRouter to prevent updates from being blocked by shouldComponentUpdate, it is important that withRouter wraps the component that implements shouldComponentUpdate. So using withRouter to wrap connect to fix it. https://reacttraining.com/react-router/web/api/withRouter
Things wrong:
- Using two different instances of history
- Using both ConnectedRouter and BrowserRouter
Code to use withRouter and connect in App.tsx
// as any to escape type checking in typescript
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(AppComponent)) as any);
createStyles({
...variantColor(theme),
root: {
'&:hover $icon': {
transform: 'scale(2.8)',
},
},
icon: {
transform: 'scale(2.5)',
}
const actions = [<h1 />, <IconButton><CloseIcon /></IconButton>];
actions.forEach((action: any, index) => {
React.cloneElement(action, {
key: `ACTION-${index}`,
className: action.type === IconButton ? classes.headerToolboxButton : ''
})
});
createStyles({
'@global': {
a: {
color: 'inherit',
},
'.recharts-tooltip-label': {
color: theme.palette.common.black,
},
},
});