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 implementshouldComponentUpdate()
)PureComponent
will only render if theprops
andstate
are different (implementshouldComponentUpdate()
with a shallowprops
andstate
comparisonReact.memo()
is similar toPureComponent
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);