React - FAQ

React Elements vs Components

• Elements: immutable, once created, its children and attibutes cannot be changed; represents the UI at a certain point in time
• Components: accept arbitrary inputs (props) and return React elements describing what should appear on the screen.

DOM vs Virtual DOM

• "real" DOM: represents what you see on your screen; in Javascript the root of the DOM is document; updates are slow
• Virtual DOM: defined and managed by React, to mirror the real DOM; faster to chagne; changes to the states will first be applied to Virtual DOM; only if it requires UI Changes, ReactDOM will then update the real DOM.

ReactDOM.render() vs React Component render()

• ReactDOM.render() manages everything under a DOM node (not the DOM node itself); ususally it is only called once
• React Component render(): when the state changes in the parent component, all components will re-render, however not all of them will have visual changes, so the real DOM may be updated much less often

Higher-order Component vs Class Component vs Hook

• Hook was introduced to replace class components
• A Higher Order Component (HOC) is a component that takes a component and returns a component.

Component vs PureComponent / React.memo()

• Component will re-render everytime (does NOT implement shouldComponentUpdate())
• PureComponent will only render if the props and state are different (implement shouldComponentUpdate() with a shallow props and state comparison
• React.memo() is similar to PureComponent but for functions

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

Is Redux still relavent?

In latest React versions, Hook can be used to share state logic between components, and Context API can be used for global states (by making a value accessible to a nested tree of components). If your use case cannot be covered by Hook and Context API, Redux is still a good choice.

How to pass parameter in event handler

Suppose handleClick() is a function, in events like onClick, the function name, WITHOUT parenthesis, should be passed.

<button onClick={this.handleClick} />

Otherwise if it is passed liked this

<button onClick={this.handleClick()} />

The function will be executed everything the render() is called, and the button onClick would not be working.

To pass parameters in the function, you have to create another function to wrap around it:

<button onClick={() => this.handleClick(id)} />

Why google is not defined

When using google maps and other APIs.

Add /*global google*/ to the top of the page

Why css is not working by assigning class

use className instead of class in JSX

How to get URL param

In react router v5, use useParams() hook.

Suppose we have a route like this:

<Route path="/users/:id" component={Users}>

Then in Users.js:

import { useParams } from "react-router-dom";

export default function Users() {
  const { id } = useParams();
  //...
}

How to change URL without reloading

Get URL

// example.com/page?q=abc
// `useLocation().search` = "?q=abc"

import { useLocation } from "react-router-dom";

const searchParams = new URLSearchParams(useLocation().search);
console.log(searchParams.get("q"));
// output: abc

Set URL

window.history.pushState({}, title, url);