Change the value of a checkbox #

To control an input with type="checkbox" set the value with checked instead of value and get the value from e.target.checked instead of e.target.value:

<input
  type="checkbox"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

Interview questions #

What is JSX? #

Javascript XML (JSX) is syntactic sugar for writing HTML in Javascript files, like this:

return <a href="/hi">hello world</a>;

JSX compiles down to plain ol' Javascript. The above would compile down to something like return React.createElement("a", { href: "/hi" }, "hello world");

React component lifecycle methods #

The most important lifecycle methods are:

• componentDidMount: called once and immediately after the first render; with functional components call useEffect(fn, []).
• componentDidUpdate: called with each update to props, state, or a forced update with forceUpdate if shouldComponentUpdate returns true after the component has rendered; with functional components use useEffect
• componentWillUnmount: called once when the component is unmounted; with functional components return a function from the first function argument of useEffect

Every React hook #

1. useState
2. useEffect
3. useRef
4. useMemo
5. useCallback
6. useContext
7. useLayoutEffect
8. useReducer
9. useImperativeHandle