Skip to main content

React ⚡️

JSX

Props

Declarative vs. Imperative

React Hooks

useState​

useEffect​

React Hooks

Deep Dives​

useContext​

useReducer​

useRef​

useMemo​

useCallback​

useLayoutEffect

useId

Other hooks​

Courses​

Custom Hooks​

React Router​

How React works under the hood​

Rendering​

Performance​

Common mistakes​

What is React?

React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently update the UI in response to data changes.

What is ReactDOM?

ReactDOM is a package that provides DOM-specific methods for rendering React components. It is used to render React components in the browser.

What is the most performance-wise expensive thing you can do?

Re-rendering the entire component tree is often the most performance-expensive operation in React.

What is Reconciliation?

Reconciliation is the process by which React updates the DOM efficiently to match the most recent component state.

What do JavaScript function components return?

Function components in React return JSX (JavaScript XML), which is a syntax extension for JavaScript recommended by React for describing what the UI should look like.

Why do we use components?

Components help in building modular, reusable, and maintainable UI structures. They encapsulate the logic and presentation of a part of the UI.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript recommended by React. It looks similar to XML/HTML and is used to describe the structure of UI elements in React.

What is Babel for?

Babel is a JavaScript compiler that allows developers to use the latest ECMAScript features by transforming the code into a backward-compatible version of JavaScript that can run in older browsers.

What is Webpack for?

Webpack is a module bundler for JavaScript applications. It takes the different parts of a web application, such as JavaScript, CSS, and images, and bundles them together for efficient delivery to the browser.

What are props in React?

Props (short for properties) are used to pass data from a parent component to a child component in React. They are immutable and allow components to communicate.

What are HOCs? What are HOFs?

HOCs (Higher Order Components) are functions that take a component and return a new component with enhanced features. HOFs (Higher Order Functions) are functions that take one or more functions as arguments and return a new function.

Why do we use hooks?

Hooks in React are used to add state and lifecycle features to functional components. They allow functional components to manage state and have side effects.

What are React Hooks?

React Hooks are functions that allow functional components to use state and lifecycle features that were previously only available in class components. Examples include useState, useEffect, and useContext.

What is the purpose of the useState hook?

The useState hook is used to add state to functional components in React. It returns an array with two elements: the current state value and a function that allows you to update the state.

What does the useEffect hook do?

The useEffect hook is used for side effects in functional components. It allows you to perform tasks like data fetching, subscriptions, or manually changing the DOM after the component has rendered.

Explain the purpose of the useCallback hook.

The useCallback hook is used to memoize functions, preventing unnecessary re-creations of functions on each render. It is especially useful in scenarios where functions are passed as props to child components.

Why is useEffect necessary, and when might you use it?

useEffect is necessary for handling side effects in functional components, such as data fetching, subscriptions, or manual DOM manipulations. It is used when you need to perform actions after the initial render or in response to changes in dependencies.

When does a useEffect run?

After the render function ends, there is a brief pause and useEffect runs milliseconds later. It often runs twice which is sometimes seen as better than only running once, so it has more chances to execute correctly.

Can you explain the differences between useMemo and useCallback?

Both useMemo and useCallback are used to memoize values, but useMemo is for memoizing values (e.g., computed calculations), while useCallback is for memoizing functions.

How does the useReducer hook work, and when might you use it?

The useReducer hook is an alternative to useState for managing more complex state logic. It takes a reducer function and an initial state, returning the current state and a dispatch function. It's useful when state transitions depend on the previous state or involve complex logic.

What are the rules of Hooks in React?

Rules of Hooks in React include calling hooks only at the top level of your components and not calling hooks inside loops, conditions, or nested functions. This ensures that hooks are called in the same order on every render.

How do you share stateful logic between components?

Custom Hooks provide a way to share stateful logic between components. You can create a custom hook as a function and use it in multiple components to reuse state and behavior logic.

Describe the difference between state and context.

State is used to manage data within a component, while context provides a way to pass data through the component tree without having to pass props manually at every level.

What is the term for passing props through multiple child components?

Prop drilling is the term used for passing props through multiple layers of nested components, which can lead to code maintainability issues.

What does the spread operator ...item do?

The spread operator is used for shallow copying objects or arrays. In React, it is often used to create new props or state objects without mutating the original.

What is the concept of currying in JavaScript?

Currying is the technique of converting a function that takes multiple arguments into a series of functions that each take a single argument. It facilitates partial application.

How does the JavaScript async/await syntax work under the hood?

async/await is built on top of Promises and the event loop. The async function returns a Promise, and await is used to pause execution until the Promise is resolved.

When does a useLayoutEffect run?

useEffect runs milliseconds after the render function ends. There is a brief pause, this can cause a strange repainting scenario - which is why sometimes we would instead use useLayoutEffect. useLayoutEffect happens immediately after the render function ends, synchronously, it will run. One re-render rather than two! Use when something needs to be measured after the render of the dom. It's recommended to only use it with animations

What does useId do?

useId generates a unique id, it can be used with the same name multiple times, under the hood it generates unique ids that are consitent across renders. They begin from 0 and look like :r0: - this pattern prevents selection with css selectors.

  • ✅ Cleaner than making a counter.
  • ✅ generates a unique id consitent within a component (per instantiation)
  • ✅ safe across server-side renders and client side