Interview Q&A

Answer: uthentication in React apps is typically done using tokens (JWTs) and local storage to persist user sessions. Common Steps:

What interviewers expect

• A clear definition tied to React in React.js projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production React.js application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in React.js architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

Managing forms in React can be tedious, but libraries like Formik and React Hook Form

simplify form handling by managing state, validation, and submission.

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();
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

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.

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:

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!

Custom hooks are a powerful way to share logic between components in a reusable and

encapsulated way. 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);
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.

In class components, the lifecycle is managed using methods like componentDidMount,

componentDidUpdate, and componentWillUnmount. 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:

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

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:

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.

Handling errors in React is done using Error Boundaries. 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) {
return <h1>Something went wrong!</h1>;
}
return this.props.children;
}
}

You wrap your components inside ErrorBoundary to catch and handle errors gracefully.

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

What interviewers expect

• A clear definition tied to React in React.js projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production React.js application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in React.js architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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

What interviewers expect

• A clear definition tied to React in React.js projects
• Trade-offs (performance, maintainability, security, cost)
• When you would and would not use it in production

Real-world example

In a production React.js application, teams apply this when handling user-facing features or integration boundaries. For example, you might use it during a sprint where reliability and observability matter—logging metrics, validating edge cases, and documenting the decision in an ADR so future developers understand why the approach was chosen.

How to explain in the interview

1. Define the concept in one or two sentences.
2. Context — where it fits in React.js architecture.
3. Example — a specific project, bug, or performance win.
4. Trade-off — what you gain vs what you sacrifice.

Tip: Practice aloud on Toolliyo mock interview or the Interview Q&A section before your real interview.

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'];
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>

);

}

React.lazy enables you to dynamically import components only when they are needed,

enabling code splitting and lazy loading.

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.