Interview Q&A

Create React App (CRA) is a boilerplate tool to set up a modern React app without

configuring build tools like Webpack, Babel, etc. It’s designed to help you focus on writing

code instead of spending time configuring tools.

Features:

• Zero Configuration: It sets up Webpack, Babel, ESLint, and other essential tools.
• Development Server: Provides a development server with hot reloading.
• Production Build: Automates production optimizations like minification, asset

optimization, etc.

How to Use CRA:

npx create-react-app my-app

cd my-app

npm start

With CRA, you don’t have to manually configure Webpack or Babel. It gives you everything

you need to start building React applications right away.

Some common build tools for React are:

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: There are several ways to handle CSS in React applications, and each comes with its own pros and cons.

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: CSS-in-JS libraries allow you to write CSS styles directly inside JavaScript files, enabling better component encapsulation and dynamic styling. Popular libraries include:

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: ge: PropTypes.number.isRequired, }; In this example, PropTypes.string.isRequired ensures that the name prop is a string nd is required. If it’s not passed or is of the wrong type, React will display a warning in the console.

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: Internationalization (i18n) in React can be handled using libraries that help manage translations, time formats, and currency formatting. The most common libraries are:

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: 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.

React Native is a framework for building native mobile applications (iOS and Android)

using React and JavaScript. While React is for web development, React Native allows you

to create mobile apps with a similar paradigm but using native components (e.g., <View>

instead of <div>).

Key Differences:

• React: Builds for the web, rendering HTML and managing DOM.
• React Native: Builds for mobile, using native components and APIs for interaction

with mobile devices (camera, geolocation, etc.).

Example in React Native:

import { Text, View } from 'react-native';

function App() {

return (

<View>

<Text>Hello, React Native!</Text>

</View>

);

}

In React Native, the components map to native UI elements, such as <Text> for text,

<View> for containers, and <Button> for buttons.

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.

Reconciliation is the process React uses to update the UI efficiently when state or props

change. React compares the old virtual DOM with the new virtual DOM and calculates the

minimal set of changes required to update the real DOM. This makes React apps fast and

efficient.

Why important:

• It helps React determine the minimal updates needed, avoiding unnecessary

re-renders.

• React uses a diffing algorithm to compare previous and current states to optimize

DOM updates.

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.

ngular:

• Framework: Full-fledged framework for building web apps.
• Uses TypeScript by default and has built-in solutions for routing, HTTP requests,

form handling, and more.

• Two-way data binding: Automatically synchronizes model and view.

Vue:

• Framework: Similar to React, but provides two-way binding and template syntax.
• Easier to integrate into existing projects.
• Flexibility: Offers the reactivity model and simplicity in syntax.

JSX transpilation refers to the process of converting JSX syntax (JavaScript XML) into

regular JavaScript. Since browsers don't understand JSX directly, tools like Babel transpile

JSX into valid JavaScript that browsers can execute.

Example:

const element = <h1>Hello, world!</h1>;

Babel transpiles the JSX into:

const element = React.createElement('h1', null, 'Hello, world!');

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>

);

}

Concurrent Mode is an experimental feature in React that enables the rendering process to

be interruptible. It allows React to work on multiple tasks at once, making apps feel more

responsive by prioritizing higher-priority updates (like animations or user input) over

lower-priority ones.

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.