The Basics

What is React?

A JavaScript library for building user interfaces.

What are props in React?

Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation, similar to HTML-tag attributes.

What are the 3 React phases?

  • 1. Render Phase
  • 2. Commit phase
  • 3. Clean up Phase

Why does React use className instead of class?

The attribute class is a keyword in JavaScript, and JSX is an extension of JavaScript. That's the principle reason why React uses className instead of class.

What is the virtual DOM and why is it important for performance?

The virtual DOM is an in-memory representation of the real DOM elements. The Virtual DOM allows React to update only what is necessary instead of everything.

What are fragments in React, and when should you use them?

A syntax that allows you to group elements without a wrapper node like div. They are useful because they have no effect on layout or styles.

Hooks in React

What is state in React?

State of a component is an object that holds some information that may change over the lifetime of the component.

What is the useEffect hook?

The useEffect Hook in React is used for handling side effects in functional components. These side effects can include data fetching, subscriptions, or manually changing the DOM.

What is the useReducer hook in React?

The useReducer hook is a React hook used for managing complex state logic. It is an alternative to useState and is generally used when you have a lot of state to update.

What are the parameters of useState? What is the initial state?

The initial state and setter function. The initial state can be any value: a number, string, boolean, array, object, or even a function that returns the state value.

What is the useRef hook in React?

is a React Hook that lets you reference a value that’s not needed for rendering. Sort of like document.querySelector, but won't re-render if the useRef is triggered.

Where do you call your hooks in your file?

Always at the top level.Example image

General React Questions

How do you pass state between components?

The easiest way is to move the state to a common parent and pass it down through props.

Explanation

What happens when a component recieves new props?

  • 1. Props are updated
  • 2. Component re-renders
  • 3. Effects may rerun
  • Explanation

Why is there a need to use keys in Lists

Keys are unique identifiers that help React know which list item to re-render and swap out.

Explanation
Homepage