React Interview Prep

When should you use React.memo or a PureComponent?

- When component doesn't change unless its props do - In big parts of the app, like list, that are slow to render - They can help make your app run smoother by not updating everything all the time

How do you create a React context?

1. Create context const AppContext = createContrext(); 2. Wrap Provider component <AppContext.Provider> <App /> </AppContext.Provider> 3. Put the data you want to access on value prop <AppContext.Provider value={"yoyo"}> 4. Get data from any child component with useContext()

What are the 5 types of hooks in React?

1. State Hooks (useState, useReducer) - manage state 2. Context hooks (useContext) - use date passed through context 3. Ref hooks (useRef) - refence HTML 4. Effect hooks (useEffect) - connect with external systems 5. Performance hooks (useMemo, useCallback) - improve app performance

What are controlled components?

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange.

What does DOM mean?

Document Object Model

What are Error Boundaries in React?

Error boundaries are components that let you catch app breaking errors and handle it with a fallback. This prevent your entire app from crashing.

What are "Render Props"?

Essentially a function returns some JSX passed as a prop. The term is used to refer to technique for sharing code between components by passing a function that returns JSX as a prop. This approach helps build complex interfaces with simpler parts working together

When would you pick React context over Redux?

For simple data/state management react context is more than sufficient.

What are a Higher Order Components (HOCs)?

Higher Order Components are special functions that take a component and add additional features or logic to it. They're used to add common features across different components such as user authentication.

What are HOCs used for?

Higher Order Components can be used for: 1. Code reuse, logic and bootstrap abstraction 2. Render high jacking 3. State abstraction and manipulation 4. Prop manipulation

How do you manage data in big apps?

In big React apps, I manage data by using state management libraries like Redux or Zustand for global state, and React context for sharing lightweight data across components. I organize the state by domain or feature to keep it modular and scalable. For server-side data, I use tools like React Query or Apollo Client to handle caching, fetching, and synchronization efficiently. This ensures the app remains maintainable and performs well as it scales.

What is the "key" prop used for?

It is a unique string or number that's used to add a unique reference to a component

What is Purity in React?

It is how React components should work. Meaning same input should always result in the same output. Steps to keep purity: 1. Only return JSX 2. Don't change stuff that existed before rendering

What is context used for in React?

It is used to pass props to any child component without having to prop-drill

What is Suspense in React?

It's a component that is used to wait for something to load. It shows a fallBack component until the data is ready

What is a react fragment?

It's an empty JSX tag. Components can only return one element. React fragments are used to return multiple elements without having to wrap them in a new tag

What is the useContext hook?

It's used to access the context data from the child element.

What is lazy loading?

Lazy loading means you app doesn't load everything at once. It loads scripts also known as chucks only when they're necessary? For example when a user has scrolled new components into view or navigated to a new page we can lazy load the required chucks/scripts at that point. We can also utilize prefetching to lazy load chunks that we will soon need.

What does it mean for a component to be "mounted" in React?

Means the DOM elements for the component were created and connected.

What are Lifecycle methods?

Special functions that run at certain times. Such as useEffect which based on it's dependency array will run once after the initial render, after each render, or after initial render and whenever a value in it's dependency array changes.

What is 'strict mode'?

Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions. This will tell us when we really shouldn't do something.

What is Render Hijacking?

The ability to control what a component will output from another component. In other words, wrapping your component in a HOC component and injecting additional props that can change the render logic of a component.

What is a state in React?

The state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders. The change in state can happen as a response to user action or system-generated events. It determines the behavior of the component and how it will render.

What is the difference between a controlled component and an uncontrolled component in React?

These relate to stateful DOM components like form elements: - Controlled Component takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handing the callback and managing its own state and passing the new value as props. - Uncontrolled Component stores it's own state internally, and you need to query the DOM to get the current value of the element. Basically it's like traditional HTML

How have hooks changed the way components work?

They let function components have their own state - With the useState hook, your components can remember things and change what they show based on that memory.

What is the useCallBack hook used for?

This is a optimization hook used to avoid unnecessary re-renders by remembering functions.

What are refs used for in React?

To reference the native DOM element.

How does react render?

Using the Virtual DOM (aka VDOM). When a state of our app changes react will update the VDOM first because it's faster. It then uses a process call "diffing" to compare the updated VDOM to the previous version to see what changed. Once it has identified the difference it will use a process called "Reconciliation" to update the real DOM with the changes it found.

How do you make React apps run smoother?

Utilize code splitting and lazy loading to only load what's required at a given point. Use React.memo, useMemo, and useCallback hook to optimize code performance by avoiding unnecessary re-renders.

How do you pass data from child component to a parent component?

Via callbacks

How do you pass data from one component to another?

Via props

What's your approach to testing components?

When testing I prioritize thorough unit testing ensuring that the components functions correctly in isolation. Then I focus on is integration testing to ensure the components integrates and seamlessly and continues to function currently as a whole. After that comes E2E testing.

Can you pass anything as a prop?

Yes

Can you initialize a state from a function?

Yes. Pass in the initial value into the useState() hook.

How to create a ref in React?

const ref = useRef()

What is React.memo and what is it used for?

memo is a higher-order function used to optimize React apps by memoizing components. It's used to skip re-rendering a component when its props are unchanged. It performs a shallow comparison of props and states. Sometimes you need to tell it how to compare things with arePropsEqual

What are primitives?

string, number, boolean, bigint, undefined, null, symbol

What is useState?

useState is a built-in react hook that returns a tuple where the first parameter is the value of the state and the second parameter is a function that sets the state

What is a shallow comparison?

A shallow comparison compares the values of primitive types and the refences of object types.

What should be done to create large-scale apps?

Break your code into small, reusable pieces. This makes your code easier to manage. Organize your files by features or routes. This helps keep related files together. Use Redux/MobX for shared state to avoid passing data through many layers. Use Context for simpler cases. Split your code and load parts as needed with React.lazy. This makes your app faster to load. Agree on how to do things like managing state or testing. This keeps everyone on the same page. Check types with TypeScript to catch bugs early. Automate testing to catch problems before they hit users. Set up CI/CD to automate tests and deployments. Keep an eye on performance and fix slowdowns. Write down how things should be done so everyone knows what to do.

What is code splitting?

Code splitting is a performance optimization technique used to split the scripts into smaller chucks to then lazy load as needed. Code can be split into chucks by routes or components with tools like Webpack.

What is composition in React?

Organizing react components in the most optimal way

What are Portals in React?

Portal is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ReactDOM.createPortal(child, container) The first argument is any render-able React child, such as an element, string, or fragment. The second argument is a DOM element. Example: Tooltip, Modals. Dropdowns

What are advantages of using React Hooks?

Primarily, hooks in general enable the extraction and reuse of stateful logic that is common across multiple components without the burden of higher order components or render props. Hooks allow to easily manipulate the state of our functional component without needing to convert them into class components. Hooks don't work inside classes (because they let you use React without classes). By using them, we can totally avoid using lifecycle methods, such as componentDidMount, componentDidUpdate, componentWillUnmount. Instead, we will use built-in hooks like useEffect .

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 using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.

What is the difference between "state" and "props"?

Props get passed to the component similar to parameters passed to a function State is managed within the component similar to variables declared in a function

What is a PureComponent?

PureComponent performs a similar function React.memo does but for class based components.