React Basics

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces

Question 2

What are 3 key characteristics?

Answer 2

1. Declarative (describe what UI should look like, not implementation details)
2. Component-based (reusable pieces of UI)
3. Unidirectional data flow (data flows in 1 direction)

Question 3

How do you add React to the DOM?

Answer 3

ReactDOM.render(<App></App>, document.getElementById(‘root’));

Question 4

Implement useReducer

Answer 4

https://dev.to/craigaholliday/using-the-usereducer-hook-in-react-with-typescript-27m1

Question 5

What are the stages / lifecycle of a component?

Answer 5

1. Mount: initial render
2. Update: re-render
3. Unmount: removed from DOM

Question 6

How do you hook into a component’s lifecycle?

Answer 6

useEffect(() => {}, [])
* used for performing side effects around the component lifecycle
* takes in a callback function
* will run after every render if no dependency array is given (an empty array will only render on mount)
* can also return a cleanup function which will run on unmount
* useEffect can be made to run synchronously (instead of asynchronously) using useLayoutEffect, meaning effects always finish running before the browser paints (but this has worst performance)

Question 7

How can you reference the DOM node associated with a component?

Answer 7

The ref attribute

const element = useRef(null);
element.current = … <- how to define it
element.current; <- how to reference it

• Instances of ref will persist between renders
• Cannot reference ref until after initial render
• When passing ref to another component, use forwardRef

This is the same as:
const [element, setElement] = useState({ current: null });
element.current
// never use the setter, setElement, therefore component never re-renders (because object is immutable); changing value in an object isn’t going to cause re-render

const inputRef = useRef(null);
const focusInput = () => inputRef.current.focus();
return (
<>
<input ref={inputRef} />
<button onClick={focusInput}>Click me</button>
<>
)

Question 8

How can you share state between components?

Answer 8

Pull state up to the lowest common component and then drill props down to where needed

Question 9

How can you use context to hold global state?

Answer 9

// ThemeContext.ts
import { createContext } from ‘react’;
export const ThemeContext = createContext({
theme: ‘light’,
})

// App.tsx
const [theme, setTheme] = useState({theme: ‘light’});
return (
<ThemeContext.Provider value={theme}>
<Page></Page>
</ThemeContext.Provider>

// Some component
import { useContext } from ‘react’;
import { ThemeContext } from ‘./ThemeContext’;
const { theme } = useContext(ThemeContext);

Question 10

How to memoize an expensive function?

Answer 10

import { useMemo } from ‘react’;
const fibValue = useMemo(() => fib(num), [num]);

Question 11

How to memoize an expensive component?

Answer 11

import { memo } from ‘react’;
const MyComponent = memo((props) => {
. . .
}, areEqual);

const areEqual = (prevProps, currProps) => prevProps === currProps;
// also need to pass memoized props (with useCallback for functions and useMemo for values)
// memo is used to memoize components while useMemo is used to memoize values

Question 12

What is difference between useMemo and useCallback?

Answer 12

useMemo is for memoizing a value; useCallback is for memoizing a function

Question 13

How can you lazy load a component that takes a long time to render?

Answer 13

import { lazy, Suspense } from ‘react’;
const MyComponent = lazy(() => import(‘./MyComponent’));
<Suspense fallback=(<div>Loading</div>)>

<MyButton>
</Suspense>
</MyButton>

Question 14

What is a portal and how do you implement one?

Answer 14

A portal is a method for rendering React elements into a DOM node outside of the parent React tree. You need to add a second root element to index.html. The most common use cases are modals and tooltips.

import { createPortal } from ‘react-dom’;
const Modal = () => createPortal(<div>My portal</div>, document.getElementById(‘modal-root’));

Question 15

How do you implement a class-based component?

Answer 15

import { Component, createRef } from ‘react’;
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: props.count ?? 0
}
this.buttonRef = createRef();
}
render() {
return <button ref={this.buttonRef} onClick={() => this.setState({ count: this.state.count + 1})>Increment</button>;
}
}

// Use methods to hook into lifecycle methods
// componentDidMount() { … }
// componentDidUpdate(prevProps, prevState) { … }
// componentWillUnmount() { … }
// shouldComponentUpdate(nextProps, nextState) { … }