React

Last Updated: 2023-09-20

What's the difference between React Elements and 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.

What's the difference between DOM and Virtual DOM?

Virtual DOM is managed by React, to accelerate updates.

Read more: DOM vs Virtual DOM vs Shadow 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);

What's the difference between state and reference?

• Updating a reference doesn't trigger re-rendering, while updating the state makes the component re-render;
• The reference update is synchronous (the updated reference value is available right away), while the state update is asynchronous (the state variable is updated after re-rendering).

When to use which:

• references store infrastructure data of side-effects, while the state stores information that is directly rendered on the screen.

2 rules about references:

• The value of the reference is persisted (stays the same) between component re-renderings;
• Updating a reference doesn't trigger a component re-rendering.

What's new in React 18?

• Suspense
• ReactDOM.render => ReactDOM.createRoot

What is Suspense?

Wrap a slow part of your application (e.g. comments) to tell react to delay this loading

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

How to add Type Checking?

• Typescript: created by Microsoft and became popular with Angular 2+.
• Flow: the static type checker created by Facebook(meaning works pretty good with React). https://flow.org/
• propTypes: deprecated and moved to a separate package prop-types, for runtime type checking for React props.