Wednesday, 11 March 2026

React Interview Questions Set 1

Written by   on   in   with No comments


1. Introduce Yourself

Answer

I am a React.js developer with around 2+ years of experience in frontend development. I have experience working with HTML, CSS, JavaScript, and React.js. I have worked on e-commerce applications, where I implemented UI components, handled API integration, and managed application state using Redux Toolkit. I am currently looking for opportunities to grow further and work on scalable frontend applications.

2. What are Semantic HTML Tags?

Answer

Semantic tags clearly describe the meaning of the content.

Examples:

<header>
<nav>
<section>
<article>
<footer>
<main>
<aside>

Example:

<article>
   <h1>Blog Title</h1>
   <p>This is a blog post</p>
</article>

Benefits:

  • Better SEO

  • Better accessibility

  • Cleaner code structure

3. What are Meta Tags?

Answer

Meta tags provide metadata about the webpage. They are written inside the <head> tag.

Example:

<meta charset="UTF-8">
<meta name="description" content="Car selling website">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Uses:

  • SEO optimization

  • Browser configuration

  • Character encoding

  • Responsive design

4. What is Flexbox and its Properties?

Answer

Flexbox is a CSS layout system used to design responsive layouts.

To use Flexbox:

.container{
 display:flex;
}

Important properties:

Container properties

flex-direction
justify-content
align-items
align-content
flex-wrap

Child properties

flex-grow
flex-shrink
flex-basis
align-self

Example:

.container{
 display:flex;
 justify-content:center;
 align-items:center;
}

5. What are CSS Positions?

Answer

CSS Position defines how an element is positioned.

Types:

static
relative
absolute
fixed
sticky

Example:

position: relative;
position: absolute;

6. Difference Between Relative and Absolute

Relative

  • Positioned relative to its normal position.

Absolute

  • Positioned relative to the nearest positioned parent.

Example

.parent{
 position:relative;
}

.child{
 position:absolute;
 top:10px;
}

7. What is CSS Box Model?

Answer

Every HTML element is treated as a box.

Structure:

Content
Padding
Border
Margin

Diagram:

Margin
 └ Border
     └ Padding
         └ Content

8. Difference Between let, var, const

Featurevarletconst
ScopeFunctionBlockBlock
RedeclareYesNoNo
ReassignYesYesNo
HoistingYesYesYes

Example:

var a = 10
let b = 20
const c = 30

9. What is Temporal Dead Zone?

Answer

Temporal Dead Zone is the time between variable hoisting and initialization for let and const.

Example:

console.log(a)
let a = 5

This gives:

ReferenceError

10. What are Hoisting Types?

Answer

Two types:

  1. Variable Hoisting

var a

  1. Function Hoisting

function test(){}

Example:

hello()

function hello(){
 console.log("hi")
}

11. What is IIFE?

Answer

Immediately Invoked Function Expression executes immediately.

Example:

(function(){
 console.log("Hello")
})();

12. Spread vs Rest Operator

Spread Operator

Used to expand elements

...

Example:

const arr1=[1,2]
const arr2=[3,4]

const arr=[...arr1,...arr2]

Rest Operator

Used to collect multiple parameters

function sum(...numbers){
 console.log(numbers)
}

13. Is JavaScript Synchronous or Asynchronous?

Answer

JavaScript is single-threaded and synchronous by default.

But asynchronous behavior is achieved using:

Promises
Async/Await
Callbacks
setTimeout
fetch API

14. Types of Functions in JavaScript

  1. Normal Function

function test(){}

  1. Function Expression

const test=function(){}

  1. Arrow Function

const test=()=>{}

  1. Anonymous Function

setTimeout(function(){},1000)

15. What are Higher Order Functions?

A function that:

  • Takes another function as argument

  • Returns a function

Example:

array.map()
array.filter()
array.reduce()

16. What are Callback Functions?

A function passed as an argument to another function.

Example:

function greet(name,callback){
 callback(name)
}

function sayHello(name){
 console.log("Hello "+name)
}

greet("Rahul",sayHello)

17. What is this Keyword?

this refers to the current execution context.

Examples:

Function

function test(){
 console.log(this)
}

→ window object (browser)

Object

const obj={
 name:"Rahul",
 show(){
  console.log(this.name)
 }
}

→ refers to object

18. Promises vs Callback vs Async/Await

Callback

function(callback)

Problem: callback hell.

Promise

new Promise((resolve,reject)=>{})

Methods:

.then()
.catch()
.finally()

Async/Await

Cleaner syntax.

async function getData(){
 const data=await fetch(url)
}

19. Promise Types

Common methods:

Promise.all()
Promise.race()
Promise.allSettled()
Promise.any()

20. Deep Copy vs Shallow Copy

Shallow Copy

Copies reference.

const obj2={...obj1}

Deep Copy

Copies completely new memory.

JSON.parse(JSON.stringify(obj))

21. Event Bubbling vs Capturing

Event Bubbling

Child → Parent

Default behavior.

Event Capturing

Parent → Child

Example:

addEventListener("click",handler,true)

22. Map vs Filter vs Reduce

Map

Transforms array.

arr.map(x=>x*2)

Filter

Filters based on condition.

arr.filter(x=>x>10)

Reduce

Reduces array to single value.

arr.reduce((sum,x)=>sum+x,0)

23. What is Currying?

Breaking a function into multiple functions.

Example:

function add(a){
 return function(b){
  return a+b
 }
}

add(2)(3)

24. Object Destructuring

Extract values from object.

Example:

const user={
 name:"Rahul",
 age:25
}

const {name,age}=user

25. for...of vs for...in

for...of

Used for arrays.

values

Example:

for(const item of arr){}

for...in

Used for objects.

keys

Example:

for(const key in obj){}

26. Fetch vs Axios

FeatureFetchAxios
Built-inYesNo
JSON conversionManualAutomatic
InterceptorsNoYes
Simpler APINoYes

27. Virtual DOM vs Real DOM

Real DOM

Actual browser DOM.

Slow updates.

Virtual DOM

Lightweight copy of DOM used by React.

Benefits:

  • Faster rendering

  • Efficient updates

React compares changes using Reconciliation Algorithm.

28. React Lifecycle Phases

3 phases:

Mounting
Updating
Unmounting

Example hooks:

useEffect()

29. Controlled vs Uncontrolled Components

Controlled

React controls input state.

const [value,setValue]=useState("")

Uncontrolled

DOM handles state.

useRef()

30. Props vs State

Props

  • Passed from parent

  • Read-only

State

  • Managed inside component

  • Mutable

31. Why State Instead of Variable?

Because React re-renders UI when state changes.

Variables do not trigger re-render.

32. What are Hooks?

Hooks allow using state and lifecycle features in functional components.

Examples:

useState
useEffect
useContext
useReducer
useRef
useMemo
useCallback

33. Child to Parent Communication

Using callback function.

Example:

Parent:

const handleClick=(data)=>{
 console.log(data)
}

<Child sendData={handleClick}/>

Child:

props.sendData("Hello")

34. useReducer

Used for complex state management.

Example:

const [state,dispatch]=useReducer(reducer,initialState)

35. Context API

Used for global state without prop drilling.

Example:

Theme
User Auth
Language

36. Redux Main Concepts

Three pillars:

Store
Actions
Reducers

Flow:

Component → Dispatch → Action → Reducer → Store → UI

37. useSelector vs useDispatch

useSelector

Reads data from store.

const data=useSelector(state=>state.users)

useDispatch

Dispatch action.

dispatch(addUser())

38. Lazy Loading

Loads components only when needed.

Example:

const Home = React.lazy(()=>import("./Home"))

39. React Portal

Used to render component outside DOM hierarchy.

Example:

Modals
Popups
Tooltips

40. useRef

Access DOM elements.

Example:

const inputRef=useRef()

inputRef.current.focus()

41. useMemo vs useCallback

HookPurpose
useMemoMemoizes value
useCallbackMemoizes function

Example

useMemo(()=>expensiveCalculation,[deps])
useCallback(()=>{},[deps])
Share:

0 comments:

Post a Comment