Chen Jian's Java Blog 

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

by Chen Jian


Posted on 2019-04-18 12:00 in Frontend


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...


JSON.stringify() won't work for ES6 Set

by Chen Jian


Posted on 2019-04-17 12:00 in Frontend


It will just return "{}", no matter if the Set is empty. This also means deep clone based on JSON won't work. If JSON.stringify() matters to you, use Array instead of Set


Material-UI: avoid RadioGroup if there are complex elements inside each radio

by Chen Jian


Posted on 2019-03-03 12:00 in Frontend


Just use seperate Radios The problem with RadioGroup with nested elements under Radios is that it messes up with your layout. RadioGroup is a child of FormGroup, which does a lot of styling itself. If you use it, you will lose a lot of freedom...


My practice of fetching data for List/Detail components in React/Redux

by Chen Jian


Posted on 2019-02-17 12:00 in Frontend


The user experience it should have When you go to a detail page from the list page or with a direct URL, the detail page should show the up-to-date data When you go to the list page with a direct URL, the list page should show the...


What happens to the redux store if I refresh the browser?

by Chen Jian


Posted on 2019-01-19 12:00 in Frontend


It will go away, and then be initialised. If you have this question, it means you have no exact idea of the lifespan of client-side state in a browser. First of all, a document is created under current tab of the browser when a url is first...


flexbox's "justify-content:center" doesn't do text-align

by Chen Jian


Posted on 2018-12-15 12:00 in Frontend


It only aligh the "items" to the center axis. Text inside each item is not aligned in center Here is an example provided by w3schools . You can see "1" is not in the center of the pink box.


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

by Chen Jian


Posted on 2018-12-02 12:00 in Frontend


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. ...


html5 localStorage pitfalls

by Chen Jian


Posted on 2018-07-11 12:00 in Frontend


It doesn't disappear after window closed It doesn't expire The old standard of it only allow string to be saved. New standard is not like so, but all mainstream browsers still use the old standard.


Why is there white space above the header?

by Chen Jian


Posted on 2018-06-24 12:00 in Frontend


I set no margin or padding at all, but there is white space above the header. <header style="background-color:gray"> <h1>Test margin collapsing</h1> </header> There is no margin in the "header" or...


Ajax in Redux with Thunk - Can't be more weird

by Chen Jian


Posted on 2018-06-22 12:00 in Frontend


How can a ajax call fit into Redux paradigm? State: The state will be updated after ajax call is over. No problem. Reducer: Reducer will change the state when ajax call is over. No problem. Action: Action can be...


What will the window.origin be in html5 sandbox iframes?

by Chen Jian


Posted on 2018-06-22 12:00 in Frontend


I did a test about this. If Your site is www.host.com The iframe src is also www.host.com Then sanbox + "allow-same-orign" enabled => window.origin will be "www.host.com" ...


Redux weird thing 3 - Action Creator

by Chen Jian


Posted on 2018-06-20 12:00 in Frontend


You can dispatch an action inside your component, for example, when a button is clicked, like render(){ return ( <div> ... <div> <button onClick={ e...


Redux - avoid to pass props down component tree manually - 4. Build container components more easily with connect()

by Chen Jian


Posted on 2018-06-19 12:00 in Frontend


With connect() you don't have to manually write the container component as a Component class. const CounterComponentContainer = connect( // store.state => props of child component. Normally it's extracted as a function called...


Redux - avoid to pass props down component tree manually - 3. Use an extra container component to keep the original one reusable

by Chen Jian


Posted on 2018-06-19 12:00 in Frontend


So a "container" component will be introduced to wrap the original one. The container component will adapt the store structure to "input parameters" the original one needs. Therefore, the original one doesn't need to access store directly...