Category Archives: Frontend

Change the font family globally in Material-UI 3.x

Some say you should use the jsx-global-plugin like “@global body{fontFamily:’someFont’}” , but it doesn’t work in my project. The global CSS still has the lower CSS speciality than MUI components’ CSS because this global CSS is using a type selector. You should use a theme instead //create a theme const myTheme = createMuiTheme({ typography: { […]

Redux + Typescript: The type of the root state

You can get the type of the state from the root reducer // the reducer const appReducer = combineReducers({ global: globalStateReducer, example: exampleReducer }); type AppState = ReturnType<typeof appReducer> However the redux state can be cleared in some scenarios, so it should be undefinable //See for “undefined redux state” type RootState = AppState | […]

Redux + Typescript: Use class to define Actions

You want the actions to be typed. You should use interface or class. Class is better than interface because in interfaces you cannot define the action "type" as a constant, but in classes you can: class LoadingStartedAction implements Action{ readonly type = LOADING_STARTED } However a class instance is not a plain object, but Redux […]

React Component: A pair of componentDidMount() and componentWillUnmount() may cause infinite loop if error is thrown from render

The following will cause an infinite loop. The render() method will be called again and again. class ToDoItemEditComponentContainer extends React.Component { componentDidMount() { this.props.loadItem(); //load item remotely and put it in the local redux store } componentWillUnmount() { this.props.clearItemLocally(); //remove item from local redux store } render() { throw “some error” } } Here is […]

Load data from backend before rendering a React component – best practice

Where to put the data fetching code? componentWillMount() ? Not any more. It’s been deprecated. You have no choice but put it inside componentDidMount() , which is recomendded by React. However ther is a big issue. componentDidMount() is actually AFTER render(). It "works" because after componentDidMount() finishes its job and changes some state, render() will […]