Interview Q&A

Short answer: Managing forms in React can be tedious, but libraries like Formik and React Hook Form simplify form handling by managing state, validation, and submission.

Explain a bit more

Formik: Provides an easy way to manage form state, validation, and submission. Supports validation using schemas (e.g., Yup). Example with Formik: import { Formik, Field, Form } from 'formik'; function MyForm() { return ( <Formik initialValues={{ name: '', email: '' }} onSubmit={(values) => console.log(values)} <Form> <Field name="name" /> <Field name="email" /> <button type="submit">Submit</button> </Form> </Formik> ); } React Hook Form: A lightweight alternative to Formik that uses React hooks to handle form state. It’s more performance-oriented due to less re-rendering. Example with React Hook Form: import { useForm } from 'react-hook-form'; function MyForm() { const { register, handleSubmit } = useForm();

Example code

const onSubmit = (data) => console.log(data);
return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('name')} /> <input {...register('email')} /> <button type="submit">Submit</button> </form> ); } Both libraries significantly reduce boilerplate and handle common issues like validation and form state management. Hooks Deep Dive

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Side effects are operations that occur outside of the React component’s scope, such as: Fetching data from an API Setting up subscriptions Manually modifying the DOM In React, side effects are handled using the useEffect hook. Basic

Example code

import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // Only run when `count` changes return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } useEffect allows you to perform side effects in function components. The second argument, the dependency array, specifies when to run the effect. If the array is empty, the effect runs only once after the initial render (like componentDidMount).

Real-world example (ShopNest)

ShopNest’s cart icon uses useState for count and useEffect to load the cart once on mount.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Infinite loops in useEffect occur when the effect continually triggers itself because the dependency array includes values that change as a result of the effect itself.

Explain a bit more

Common cause: If a value inside useEffect is being updated, and it's in the dependency array, React will keep rerunning the effect. How to avoid: Use an empty dependency array ([]) if the effect should run only once. Be selective with dependencies to avoid unnecessary re-renders.

Example code

useEffect(() => { // Perform API call or other side effects fetchData(); }, []); // No dependencies, effect runs only once If the dependency list has state values or props that change inside the effect, React will rerun it every time those values change. Be mindful of that!

Real-world example (ShopNest)

ShopNest’s cart icon uses useState for count and useEffect to load the cart once on mount.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Custom hooks are a powerful way to share logic between components in a reusable and encapsulated way.

Explain a bit more

A custom hook is simply a JavaScript function that uses React hooks (like useState, useEffect, etc.). Example of a custom hook: // useLocalStorage.js import { useState } from 'react'; function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { const item = localStorage.getItem(key);

Example code

return item ? JSON.parse(item) : initialValue; }); const setValue = (value) => { setStoredValue(value); localStorage.setItem(key, JSON.stringify(value)); }; return [storedValue, setValue];
} export default useLocalStorage; You can then use this custom hook in any component: import useLocalStorage from './useLocalStorage'; function App() { const [name, setName] = useLocalStorage('name', 'John');
return ( <div> <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" /> </div> ); } Custom hooks allow for reusable logic (like managing form state, fetching data, etc.) and encapsulation of behavior in a way that doesn't require repeated code.

Real-world example (ShopNest)

ShopNest’s cart icon uses useState for count and useEffect to load the cart once on mount.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: In class components, the lifecycle is managed using methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

Explain a bit more

With hooks, these are replaced with useEffect, which can mimic any lifecycle behavior. Lifecycle Mapping: componentDidMount: Use useEffect with an empty dependency array ([]). componentDidUpdate: Use useEffect with dependencies. componentWillUnmount: Return a cleanup function inside useEffect.

Example code

useEffect(() => { // Equivalent to componentDidMount and componentDidUpdate console.log("Component mounted or updated"); return () => { // Equivalent to componentWillUnmount console.log("Cleanup before component unmount"); }; }, [dependencies]); // Will run on mount and update based on dependencies

Real-world example (ShopNest)

ShopNest’s cart icon uses useState for count and useEffect to load the cart once on mount.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: React keys help React identify which items in a list are changed, added, or removed. Keys provide a stable identity for each element, allowing React to optimize re-renders. Important: Keys should be unique for each sibling component. Why important: Without keys, React has to re-render all list items when the list changes, which can be inefficient.

Example code

const items = ['apple', 'banana', 'cherry']; return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); Tip: It’s better to use a unique identifier (e.g., id) as a key instead of using index if the list can change order or content dynamically.

Real-world example (ShopNest)

When rendering cart lines, use a stable key={item.id}—not the array index—so React updates the right row after delete.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: Handling errors in React is done using Error Boundaries.

Explain a bit more

They are React components that catch JavaScript errors anywhere in their child component tree and log those errors or display a fallback UI. Example of Error Boundary: class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; // Update state to trigger fallback UI } componentDidCatch(error, info) { console.error(error, info); } render() { if (this.state.hasError) {

Example code

return <h1>Something went wrong!</h1>;
}
return this.props.children;
}
} You wrap your components inside ErrorBoundary to catch and handle errors gracefully.

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: To optimize React apps for SEO (Search Engine Optimization):

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: React uses the Virtual DOM to handle updates. When state or props change, React creates a new virtual DOM, compares it to the previous version, and calculates the most efficient way to update the actual DOM. Steps:

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: new virtual DOM, compares it to the previous version, and calculates the most efficient way to update the actual DOM. Steps: new virtual DOM, compares it to the previous version, and calculates the most efficient way to update the actual DOM. Steps:

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: You can use libraries like react-dnd or react-beautiful-dnd for drag-and-drop functionality. Example with react-beautiful-dnd: npm install react-beautiful-dnd import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; function App() { const items = ['item1', 'item2', 'item3'];

Example code

return ( <DragDropContext onDragEnd={() => {}}> <Droppable droppableId="droppable"> {(provided) => ( <ul ref={provided.innerRef} {...provided.droppableProps}> {items.map((item, index) => ( <Draggable key={item} draggableId={item} index={index}> {(provided) => ( <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} {item} </li> )} </Draggable> ))} {provided.placeholder} </ul> )} </Droppable> </DragDropContext> ); }

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.

Short answer: React.lazy enables you to dynamically import components only when they are needed, enabling code splitting and lazy loading.

Explain a bit more

const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <React.Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </React.Suspense> ); } Suspense is a wrapper around lazy-loaded components that shows a loading fallback while the component is being loaded.

Real-world example (ShopNest)

ShopNest’s storefront is React: components for ProductCard, CartDrawer, and CheckoutForm, with hooks for local UI state.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.