React Basics

Question 1

Explain the useState() hook.

Answer 1

1. function version of useState() runs only on first render
2. If only changing 1 property, then spreading other properties into new state is required

Question 2

Explain the useRef() hook.

Question 3

Explain the useMemo() hook.

Question 4

Explain the useEffect() hook.

Answer 4

1. One of the more important React Hooks; perfect for handling side effects caused by mounting, un-mounting, changing state, etc.
2. Effects run after every completed render - but you can choose to fire them after only certain values have changed.
3. The hook uses an array of ‘dependencies’: variables or states that useEffect listens to for changes - when their values change, the main body of the useEffect hook is executed.
4. The return statement of this hook is used to clean methods that are already running, such as timers.
5. The return statement of this hook is used to clean methods that are already running, such as timers. The first time this hook is called, its main body is the one that is going to be evaluated first. All other subsequent times the hook is called, the return statement will be evaluated first, and, after that, the hook’s main body. This behaviour is especially useful for cleaning code that is already running before run it again, which enable us to prevent memory leaks.

Question 5

Explain the useCallback() hook.

Question 6

Explain the useImperative() hook.

Question 7

Explain the useLayoutEffect() hook.

Question 8

Explain the useDebugValue() hook.

Question 9

Explain the properties of React Hooks.

Answer 9

1. They can only be used inside function components and not class components. This is because classes already have functionality that is addressed by React Hooks.
2. React Hooks must be called in the same exact order in every component render. Hooks will run in order they are declared.
3. Hooks cannot be used in an if statement.

Question 10

What is a memory leak?

Answer 10

Simply put, a memory leak is said to occur whenever inaccessible or unreferenced data exists in memory. According to Wikipedia, a memory leak is a type of resource leak that occurs when a computer program incorrectly manages memory allocations in a way that memory that is no longer needed is not released.

Question 11

Give some use cases for the useEffect hook.

Answer 11

1. Running ONCE on mount: fetch API data
2. Running on state change: validating input field
3. Running on state change: live filtering
4. Running on state change: trigger animation on new array value
5. Running on props change: update paragraph list on fetched API data update
6. Running on props change: updating fetched API data to get BTC updated price

Question 12

Give some use cases for the useEffect hook.

Answer 12

1. Running ONCE on mount: fetch API data
2. Running on state change: validating input field
3. Running on state change: live filtering
4. Running on state change: trigger animation on new array value
5. Running on props change: update paragraph list on fetched API data update
6. Running on props change: updating fetched API data to get BTC updated price

Question 13

What is a race condition?

Answer 13

A race condition occurs when two or more threads can access shared data and they try to change it at the same time. Because the thread scheduling algorithm can swap between threads at any time, you don’t know the order in which the threads will attempt to access the shared data. Therefore, the result of the change in data is dependent on the thread scheduling algorithm, i.e. both threads are “racing” to access/change the data.

Problems often occur when one thread does a “check-then-act” (e.g. “check” if the value is X, then “act” to do something that depends on the value being X) and another thread does something to the value in between the “check” and the “act”. E.g:

if (x == 5) // The “Check”
{
y = x * 2; // The “Act”

// If another thread changed x in between “if (x == 5)” and “y = x * 2” above,
// y will not be equal to 10.
}
The point being, y could be 10, or it could be anything, depending on whether another thread changed x in between the check and act. You have no real way of knowing.

In order to prevent race conditions from occurring, you would typically put a lock around the shared data to ensure only one thread can access the data at a time. This would mean something like this:

// Obtain lock for x
if (x == 5)
{
y = x * 2; // Now, nothing can change x until the lock is released.
// Therefore y = 10
}
// release lock for x

Question 14

Why shouldn’t ‘async’ be used in useEffect callback?

Answer 14

React’s useEffect hook expects a cleanup function returned from it which is called when the component unmounts. Using an async function here will cause a bug as the cleanup function will never get called.