React Topics for Interview - Complete Guide

What is React?
React is a declarative, component-based JavaScript library for building user interfaces,
particularly for single-page applications (SPAs). Created by Facebook, React allows developers
to create reusable UI components that efficiently update and render when data changes. [1] [2]
Key Features of React:
Virtual DOM: Provides efficient updates and rendering by creating a virtual representation
of the real DOM [3] [1]
Component-Based Architecture: Breaks down UI into independent, reusable
components [4] [1]
Unidirectional Data Flow: Data flows from parent to child components, making applications
more predictable [1] [4]
JSX Support: Allows writing HTML-like syntax in JavaScript [2] [4]
Server-Side Rendering: Supports SSR for better SEO and performance [2] [1]

JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows you to write HTML-like markup inside
JavaScript files. It makes React code more readable and expressive. [5] [6] [4]
JSX Example:

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

// JSX with expressions

const name = 'John';
const greeting = <h1>Hello, {name}!</h1>;

// JSX with multiple elements (must be wrapped)

const component = (
<div>
<h1>Welcome</h1>
<p>This is a paragraph</p>
</div>
);

JSX Rules:
 Must return a single parent element or use React Fragments (<>...</>)
Use camelCase for HTML attributes (className instead of class)
JavaScript expressions must be wrapped in curly braces {}
Self-closing tags must end with /> [6] [7] [5]

React Components
Components are the building blocks of React applications. They are reusable pieces of code
that return JSX to describe what should appear on the screen. [8] [9] [10]

Functional Components
Modern preferred approach using JavaScript functions:

import React from 'react';

// Basic functional component

function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}

// Arrow function syntax

const Welcome = (props) => {
return <h1>Hello, {props.name}!</h1>;
};

// With React Hooks for state management

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}

Class Components
Traditional approach using ES6 classes (still supported but less common):

import React, { Component } from 'react';

class Welcome extends Component {

constructor(props) {
super(props);
 this.state = { count: 0 };
}

handleClick = () => {
this.setState({ count: this.state.count + 1 });
}

render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>
Increment
</button>
</div>
);
}
}

Key Differences:
Functional components are simpler, more concise, and work with Hooks
Class components require more boilerplate but provide lifecycle methods
Modern React favors functional components with Hooks [9] [10] [8]

Props vs State

Props (Properties)
Props are immutable data passed from parent to child components. They allow
communication between components. [11] [12] [13]

// Parent component
function App() {
return <UserProfile name="John" age={25} />;
}

// Child component receiving props

function UserProfile(props) {
return (
<div>
<h1>{props.name}</h1>
<p>Age: {props.age}</p>
</div>
);
}
State
State is mutable data managed within a component. It represents data that can change over
time and triggers re-renders. [12] [13] [11]

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

const increment = () => {

setCount(count + 1);
};

return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}

Key Differences:
Props: Read-only, passed from parent, external to component
State: Mutable, internal to component, triggers re-renders when updated
Usage: Props for data passing, State for data that changes over time [13] [11] [12]

React Hooks
Hooks are functions that let you use state and other React features in functional
components. They start with use and follow specific rules. [14] [15] [16]

useState Hook
Manages local state in functional components:

import React, { useState } from 'react';

function Example() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>

<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter name"
 />
</div>
);
}

useEffect Hook
Handles side effects like data fetching, subscriptions, and DOM manipulation:

import React, { useState, useEffect } from 'react';

function UserData() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
// Effect runs after render
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
setUsers(data);
setLoading(false);
});

// Cleanup function (optional)

return () => {
console.log('Cleanup');
};
}, []); // Empty dependency array = run once

if (loading) return <div>Loading...</div>;

return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}

useEffect Dependency Patterns:

[] - Run once on mount
[value] - Run when value changes
No array - Run after every render [15] [16] [14]
Event Handling
React uses SyntheticEvents which are cross-browser wrappers around native events. Event
handlers are written in camelCase. [17] [18] [19] [20]

function Button() {
const handleClick = (e) => {
e.preventDefault(); // Prevent default behavior
console.log('Button clicked!', e.target);
};

const handleSubmit = (name) => {

alert(`Hello, ${name}!`);
};

return (
<div>
<button onClick={handleClick}>Click me</button>

{/* Passing parameters */}

<button onClick={() => handleSubmit('John')}>
Say Hello
</button>

{/* Multiple functions */}

<button onClick={() => {
console.log('First action');
handleClick();
}}>
Multiple Actions
</button>
</div>
);
}

Event Handler Best Practices:

Use arrow functions for simple handlers
Define separate functions for complex logic
Use useCallback to prevent unnecessary re-renders in child components [18] [19] [17]

Lifecycle Methods
Lifecycle methods control component behavior during different phases: Mounting, Updating,
and Unmounting. [21] [22] [23]
Class Component Lifecycle

class LifecycleExample extends React.Component {

constructor(props) {
super(props);
this.state = { data: null };
}

// Mounting
componentDidMount() {
console.log('Component mounted');
// Perfect for API calls
this.fetchData();
}

// Updating
componentDidUpdate(prevProps, prevState) {
console.log('Component updated');
if (prevProps.userId !== this.props.userId) {
this.fetchData();
}
}

// Unmounting
componentWillUnmount() {
console.log('Component will unmount');
// Cleanup: remove listeners, cancel requests
clearInterval(this.timer);
}

fetchData = () => {
// API call logic
}

render() {
return <div>{this.state.data}</div>;
}
}

Functional Component Equivalent with useEffect

import React, { useState, useEffect } from 'react';

function LifecycleExample({ userId }) {

const [data, setData] = useState(null);

// componentDidMount + componentDidUpdate
useEffect(() => {
console.log('Effect runs');
fetchData();

// componentWillUnmount (cleanup)
return () => {
console.log('Cleanup');
 };
}, [userId]); // Dependency array

const fetchData = async () => {

// API call logic
};

return <div>{data}</div>;
}

Common Lifecycle Methods:

componentDidMount() - After component mounts
componentDidUpdate() - After component updates
componentWillUnmount() - Before component unmounts
shouldComponentUpdate() - Control re-rendering [22] [23] [21]

React Router
React Router enables navigation and routing in single-page applications, allowing you to create
multiple views without full page reloads. [24] [25] [26]

Basic Setup

import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom';

function App() {
return (
<BrowserRouter>
{/* Navigation */}
<nav>
<Link to="/">Home</Link> |{" "}
<Link to="/about">About</Link> |{" "}
<Link to="/contact">Contact</Link>
</nav>

{/* Routes */}

<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/user/:id" element={<UserProfile />} />
</Routes>
</BrowserRouter>
);
}

function Home() {
return <h1>Home Page</h1>;
}

function About() {
 return <h1>About Page</h1>;
}

function Contact() {
return <h1>Contact Page</h1>;
}

Programmatic Navigation

import { useNavigate, useParams } from 'react-router-dom';

function UserProfile() {
const { id } = useParams(); // Get URL parameters
const navigate = useNavigate();

const handleGoBack = () => {

navigate(-1); // Go back
};

const handleGoHome = () => {

navigate('/'); // Navigate to home
};

return (
<div>
<h1>User Profile: {id}</h1>
<button onClick={handleGoBack}>Go Back</button>
<button onClick={handleGoHome}>Go Home</button>
</div>
);
}

Key Components:
BrowserRouter - Enables routing

Routes - Container for route definitions

Route - Maps URL paths to components
Link - Navigation links
useNavigate - Programmatic navigation
useParams - Access URL parameters [25] [26] [24]

Context API vs Redux

Context API
React's built-in state management solution for passing data through component tree without
prop drilling. [27] [28] [29]

import React, { createContext, useContext, useState } from 'react';

// Create Context
const ThemeContext = createContext();

// Provider Component
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {

setTheme(theme === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}

// Consumer Component
function ThemedButton() {
const { theme, toggleTheme } = useContext(ThemeContext);

return (
<button
onClick={toggleTheme}
style={{
background: theme === 'light' ? '#fff' : '#333',
color: theme === 'light' ? '#333' : '#fff'
}}
>
Current theme: {theme}
</button>
);
}

// App
function App() {
return (
<ThemeProvider>
<ThemedButton />
</ThemeProvider>
);
}
Redux
Centralized state management with predictable state updates through actions and reducers.
[28] [29] [27]

import { createStore } from 'redux';

import { useSelector, useDispatch } from 'react-redux';

// Reducer
const counterReducer = (state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};

// Store
const store = createStore(counterReducer);

// Component
function Counter() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();

return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
</div>
);
}

When to Use:
Context API: Simple to moderate apps, passing data to deeply nested components
Redux: Complex state logic, multiple data sources, time-travel debugging needed [29] [27]
[28]

Performance Optimization

React.memo
Prevents unnecessary re-renders by memoizing component results. [30] [31] [32]

import React, { memo, useState } from 'react';

// Child component that re-renders only when props change

 const ExpensiveComponent = memo(({ data, onUpdate }) => {
console.log('ExpensiveComponent rendered');
return (
<div>
<h3>{data.title}</h3>
<button onClick={() => onUpdate(data.id)}>Update</button>
</div>
);
});

function App() {
const [count, setCount] = useState(0);
const [items, setItems] = useState([
{ id: 1, title: 'Item 1' },
{ id: 2, title: 'Item 2' }
]);

const handleUpdate = (id) => {

console.log('Update item:', id);
};

return (
<div>
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>

{items.map(item => (
<ExpensiveComponent
key={item.id}
data={item}
onUpdate={handleUpdate}
/>
))}
</div>
);
}

useMemo and useCallback

Optimize expensive calculations and function references. [33] [31] [34]

import React, { useState, useMemo, useCallback } from 'react';

function ExpensiveList({ items }) {

const [filter, setFilter] = useState('');
const [sortOrder, setSortOrder] = useState('asc');

// Memoize expensive calculation

const filteredAndSortedItems = useMemo(() => {
console.log('Calculating filtered items...');
return items
.filter(item => item.name.toLowerCase().includes(filter.toLowerCase()))
.sort((a, b) => {
if (sortOrder === 'asc') {
 return a.name.localeCompare(b.name);
}
return b.name.localeCompare(a.name);
});
}, [items, filter, sortOrder]);

// Memoize callback to prevent child re-renders

const handleItemClick = useCallback((itemId) => {
console.log('Item clicked:', itemId);
}, []);

return (
<div>
<input
value={filter}
onChange={(e) => setFilter(e.target.value)}
placeholder="Filter items..."
/>
<button onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}>
Sort: {sortOrder}
</button>

{filteredAndSortedItems.map(item => (
<div key={item.id} onClick={() => handleItemClick(item.id)}>
{item.name}
</div>
))}
</div>
);
}

Performance Tips:
Use React.memo for components that re-render with same props
Use useMemo for expensive calculations
Use useCallback for event handlers passed to child components
Profile with React DevTools before optimizing [31] [34] [33]

Custom Hooks
Custom hooks are reusable functions that encapsulate stateful logic and can be shared
across components. [35] [36] [37]

Creating Custom Hooks

import { useState, useEffect } from 'react';

// Custom hook for API data fetching

function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
 useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(url);
if (!response.ok) throw new Error('Failed to fetch');
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};

fetchData();
}, [url]);

return { data, loading, error };

}

// Custom hook for localStorage

function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
return initialValue;
}
});

const setValue = (value) => {

try {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error('Error saving to localStorage:', error);
}
};

return [storedValue, setValue];

}

// Custom hook for toggle state

function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);

const toggle = () => setValue(prev => !prev);

const setTrue = () => setValue(true);
const setFalse = () => setValue(false);

return [value, { toggle, setTrue, setFalse }];

}
Using Custom Hooks

function UserProfile({ userId }) {

// Using custom fetch hook
const { data: user, loading, error } = useFetch(`/api/users/${userId}`);

// Using custom localStorage hook

const [favorites, setFavorites] = useLocalStorage('favorites', []);

// Using custom toggle hook

const [isEditing, { toggle: toggleEdit, setFalse: cancelEdit }] = useToggle();

if (loading) return <div>Loading...</div>;

if (error) return <div>Error: {error}</div>;

const addToFavorites = () => {

setFavorites([...favorites, user.id]);
};

return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>

{isEditing ? (
<div>
<button onClick={cancelEdit}>Cancel</button>
</div>
) : (
<button onClick={toggleEdit}>Edit</button>
)}

<button onClick={addToFavorites}>Add to Favorites</button>

</div>
);
}

Custom Hook Rules:

Must start with "use"
Can call other hooks
Share stateful logic, not state itself
Each call creates independent state [36] [37] [35]

Forms in React
Controlled Components
Form data handled by React state - recommended approach. [38] [39] [40]

import React, { useState } from 'react';

function ContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: '',
category: 'general'
});

const [errors, setErrors] = useState({});

const handleChange = (e) => {

const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));

// Clear error when user starts typing

if (errors[name]) {
setErrors(prev => ({
...prev,
[name]: ''
}));
}
};

const validateForm = () => {

const newErrors = {};

if (!formData.name.trim()) {
newErrors.name = 'Name is required';
}

if (!formData.email.trim()) {
newErrors.email = 'Email is required';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = 'Email is invalid';
}

if (!formData.message.trim()) {
newErrors.message = 'Message is required';
}

return newErrors;
};

const handleSubmit = (e) => {

e.preventDefault();

const formErrors = validateForm();

 if (Object.keys(formErrors).length > 0) {
setErrors(formErrors);
return;
}

// Submit form
console.log('Form submitted:', formData);
};

return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
{errors.name && <span className="error">{errors.name}</span>}
</div>

<div>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>

<div>
<label>Category:</label>
<select name="category" value={formData.category} onChange={handleChange}>
<option value="general">General</option>
<option value="support">Support</option>
<option value="sales">Sales</option>
</select>
</div>

<div>
<label>Message:</label>
<textarea
name="message"
value={formData.message}
onChange={handleChange}
/>
{errors.message && <span className="error">{errors.message}</span>}
</div>

<button type="submit">Submit</button>
</form>
);
}
Uncontrolled Components
Form data handled by DOM using refs. [39] [40] [41]

import React, { useRef } from 'react';

function UncontrolledForm() {
const nameRef = useRef();
const emailRef = useRef();
const messageRef = useRef();

const handleSubmit = (e) => {

e.preventDefault();

const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
message: messageRef.current.value
};

console.log('Form data:', formData);

// Reset form
e.target.reset();
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
ref={nameRef}
placeholder="Name"
defaultValue=""
/>

<input
type="email"
ref={emailRef}
placeholder="Email"
defaultValue=""
/>

<textarea
ref={messageRef}
placeholder="Message"
defaultValue=""
/>

<button type="submit">Submit</button>
</form>
);
}

When to Use:
 Controlled: Complex forms, real-time validation, dynamic behavior
Uncontrolled: Simple forms, integration with non-React libraries [40] [38] [39]

Error Boundaries
Error boundaries are React components that catch JavaScript errors anywhere in their child
component tree and display fallback UI. [42] [43] [44]

Class Component Error Boundary

import React from 'react';

class ErrorBoundary extends React.Component {

constructor(props) {
super(props);
this.state = { hasError: false, error: null, errorInfo: null };
}

static getDerivedStateFromError(error) {
// Update state to show fallback UI
return { hasError: true };
}

componentDidCatch(error, errorInfo) {
// Log error information
console.error('Error caught by boundary:', error, errorInfo);

this.setState({
error: error,
errorInfo: errorInfo
});

// Send to error reporting service

// logErrorToService(error, errorInfo);
}

render() {
if (this.state.hasError) {
return (
<div>
<h2>Something went wrong</h2>
<details>
<summary>Error details</summary>
<pre>{this.state.error && this.state.error.toString()}</pre>
<pre>{this.state.errorInfo.componentStack}</pre>
</details>
<button onClick={() => window.location.reload()}>
Reload Page
</button>
</div>
);
}

return this.props.children;
 }
}

// Usage
function App() {
return (
<div>
<h1>My App</h1>
<ErrorBoundary>
<BuggyComponent />
</ErrorBoundary>

<ErrorBoundary>
<AnotherComponent />
</ErrorBoundary>
</div>
);
}

// Component that might throw an error

function BuggyComponent() {
const [count, setCount] = useState(0);

if (count === 3) {
throw new Error('Component crashed!');
}

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}

Using react-error-boundary Library

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {

return (
<div role="alert">
<h2>Something went wrong:</h2>
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
);
}

function App() {
return (
<ErrorBoundary
FallbackComponent={ErrorFallback}
 onError={(error, errorInfo) => {
console.log('Error logged:', error, errorInfo);
}}
onReset={() => {
// Reset app state if needed
}}
>
<BuggyComponent />
</ErrorBoundary>
);
}

Error Boundaries Do NOT Catch:

Errors in event handlers
Asynchronous code (setTimeout, promises)
Server-side rendering errors
Errors in the error boundary itself [43] [44] [42]

Testing React Applications

Jest and Enzyme Setup

Jest is a testing framework, Enzyme is a testing utility for React components. [45] [46] [47]

// setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

// Component to test
import React from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<span data-testid="count">{count}</span>
<button
data-testid="increment"
onClick={() => setCount(count + 1)}
>
Increment
</button>
</div>
);
}

export default Counter;

Writing Tests

// Counter.test.js
import React from 'react';
import { shallow, mount } from 'enzyme';
import Counter from './Counter';

describe('Counter Component', () => {

test('renders without crashing', () => {
const wrapper = shallow(<Counter />);
expect(wrapper.exists()).toBe(true);
});

test('displays initial count of 0', () => {

const wrapper = shallow(<Counter />);
expect(wrapper.find('[data-testid="count"]').text()).toBe('0');
});

test('increments count when button is clicked', () => {

const wrapper = mount(<Counter />);
const button = wrapper.find('[data-testid="increment"]');
const countSpan = wrapper.find('[data-testid="count"]');

// Initial count
expect(countSpan.text()).toBe('0');

// Click button
button.simulate('click');

// Updated count
expect(wrapper.find('[data-testid="count"]').text()).toBe('1');
});

test('handles multiple clicks correctly', () => {

const wrapper = mount(<Counter />);
const button = wrapper.find('[data-testid="increment"]');

// Click multiple times

button.simulate('click');
button.simulate('click');
button.simulate('click');

expect(wrapper.find('[data-testid="count"]').text()).toBe('3');
});
});

// Testing with props

describe('UserProfile Component', () => {
const mockUser = {
name: 'John Doe',
email: '[email protected]'
};

test('displays user information correctly', () => {

const wrapper = shallow(<UserProfile user={mockUser} />);
 expect(wrapper.find('.user-name').text()).toBe('John Doe');
expect(wrapper.find('.user-email').text()).toBe('[email protected]');
});

test('calls onEdit when edit button is clicked', () => {

const mockOnEdit = jest.fn();
const wrapper = shallow(
<UserProfile user={mockUser} onEdit={mockOnEdit} />
);

wrapper.find('.edit-button').simulate('click');
expect(mockOnEdit).toHaveBeenCalledWith(mockUser.id);
});
});

// Testing hooks
import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('useCounter hook', () => {

const { result } = renderHook(() => useCounter(0));

expect(result.current.count).toBe(0);

act(() => {
result.current.increment();
});

expect(result.current.count).toBe(1);
});

Testing Best Practices:

Test behavior, not implementation
Use descriptive test names
Mock external dependencies
Test both happy path and error cases
Use data-testid attributes for reliable element selection [46] [47] [45]

This comprehensive guide covers all essential React topics for interviews. Each concept includes
practical examples and real-world use cases to help you understand not just how React works,
but why and when to use specific features. Focus on understanding the core principles, practice
with hands-on examples, and you'll be well-prepared for React interviews at any level.
⁂

1. https://www.interviewbit.com/react-interview-questions/
2. https://www.geeksforgeeks.org/reactjs/react-interview-questions/
3. https://dev.to/ruppysuppy/17-react-interview-questions-you-must-know-as-a-developer-in-2025-1o6f
4. https://www.akalinfo.com/blog/reactjs-interview-questions/
 5. https://www.w3schools.com/react/react_jsx.asp
6. https://kinsta.com/knowledgebase/what-is-jsx/
7. https://www.freecodecamp.org/news/jsx-in-react-introduction/
8. https://www.freecodecamp.org/news/function-component-vs-class-component-in-react/
9. https://www.uxpin.com/studio/blog/functional-vs-class-components/
10. https://www.geeksforgeeks.org/blogs/differences-between-functional-components-and-class-compon
ents/
11. https://joelolawanle.com/blog/understanding-state-props-react-key-differences-explained
12. https://www.geeksforgeeks.org/reactjs/reactjs-state-vs-props/
13. https://dev.to/highflyer910/react-props-vs-state-whats-the-difference-4e3i
14. https://www.freecodecamp.org/news/how-to-use-the-usestate-and-useeffect-hooks-in-your-project/
15. https://www.geeksforgeeks.org/reactjs/difference-between-usestate-and-useeffect-hook-in-reactjs/
16. https://codedamn.com/news/reactjs/usestate-and-useeffect-hooks
17. https://www.geeksforgeeks.org/reactjs/react-onclick-event/
18. https://blog.logrocket.com/react-onclick-event-handlers-guide/
19. https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-onclick
20. https://www.w3schools.com/react/react_events.asp
21. https://www.geeksforgeeks.org/reactjs/reactjs-lifecycle-components/
22. https://www.freecodecamp.org/news/react-component-lifecycle-methods/
23. https://ionicframework.com/docs/react/lifecycle
24. https://www.w3schools.com/react/react_router.asp
25. https://ui.dev/react-router-programmatically-navigate
26. https://www.syncfusion.com/blogs/post/react-router-navigation-techniques
27. https://www.dhiwise.com/post/comparing-performance-react-redux-vs-context
28. https://www.geeksforgeeks.org/blogs/context-api-vs-redux-api/
29. https://dev.to/ruppysuppy/redux-vs-context-api-when-to-use-them-4k3p
30. https://www.contentful.com/blog/react-memo-improve-performance/
31. https://www.rajeshdhiman.in/blog/react-performance-optimization-memoization-lazy-loading
32. https://react.dev/reference/react/memo
33. https://www.geeksforgeeks.org/reactjs/optimizing-performance-with-usememo-and-usecallback-hook
s/
34. https://www.freecodecamp.org/news/react-performance-optimization-techniques/
35. https://www.geeksforgeeks.org/reactjs/reactjs-custom-hooks/
36. https://dev.to/arafat4693/15-useful-react-custom-hooks-that-you-can-use-in-any-project-2ll8
37. https://www.robinwieruch.de/react-custom-hook/
38. https://www.freecodecamp.org/news/what-are-controlled-and-uncontrolled-components-in-react/
39. https://www.geeksforgeeks.org/reactjs/controlled-vs-uncontrolled-components-in-reactjs/
40. https://www.scaler.com/topics/react/controlled-and-uncontrolled-components-in-react/
41. https://dev.to/vishnusatheesh/controlled-and-uncontrolled-components-in-react-1me4
42. https://legacy.reactjs.org/docs/error-boundaries.html
43. https://dev.to/m_midas/exploring-error-boundary-in-react-enhancing-robustness-and-error-handling-
3457
44. https://www.geeksforgeeks.org/reactjs/react-js-error-boundaries/
45. https://www.syncfusion.com/blogs/post/unit-testing-in-react-with-jest-and-enzyme-frameworks
46. https://www.xenonstack.com/blog/unit-testing-in-react
47. https://jestjs.io/docs/tutorial-react
48. https://www.freecodecamp.org/news/react-interview-prep-handbook/
49. https://www.youtube.com/watch?v=NkWOzTEEcco
50. https://www.greatfrontend.com/blog/100-react-interview-questions-straight-from-ex-interviewers
51. https://github.com/sudheerj/reactjs-interview-questions
52. https://react.dev/reference/react/useState
53. https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-interview-questions
54. https://www.w3schools.com/react/react_interview_prep.asp
55. https://www.w3schools.com/react/react_useeffect.asp
56. https://github.com/greatfrontend/top-reactjs-interview-questions
57. https://www.youtube.com/watch?v=CAsTwrYx8pM
58. https://react.dev/reference/react/useEffect
59. https://www.greatfrontend.com/blog/top-30-reactjs-interview-questions-and-answers
60. https://legacy.reactjs.org/docs/hooks-effect.html
61. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_g
etting_started
62. https://www.w3schools.com/react/react_class.asp
63. https://www.w3schools.com/react/react_lifecycle.asp
64. https://www.codecademy.com/learn/react-101/modules/react-101-jsx-u/cheatsheet
65. https://www.w3schools.com/react/react_components.asp
66. https://legacy.reactjs.org/docs/react-component.html
67. https://legacy.reactjs.org/docs/introducing-jsx.html
68. https://react.dev/reference/react/Component
69. https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
70. https://react.dev/learn/writing-markup-with-jsx
71. https://legacy.reactjs.org/docs/components-and-props.html
72. https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-re
act
73. https://www.angularminds.com/blog/react-onclick-event-handlers-a-complete-guide
74. https://stackoverflow.com/questions/68949290/is-redux-internally-using-context-api
75. https://www.youtube.com/watch?v=IYvD9oBCuJI
76. https://www.reddit.com/r/reactjs/comments/z4y7sj/redux_vs_context_what_exactly_does_redux/
77. https://www.linkedin.com/pulse/understanding-difference-between-props-state-react-basit-ch
78. https://legacy.reactjs.org/docs/handling-events.html
79. https://www.geeksforgeeks.org/reactjs/comparing-redux-and-context-api-in-react-a-comprehensive-
analysis/
80. https://www.geeksforgeeks.org/reactjs/what-are-the-differences-between-props-and-state/
81. https://react.dev/learn/responding-to-events
82. https://reactnavigation.org/docs/1.x/routers/
83. https://www.w3schools.com/react/react_customhooks.asp
84. https://reactrouter.com/start/library/navigating
85. https://legacy.reactjs.org/docs/optimizing-performance.html
86. https://react.dev/learn/reusing-logic-with-custom-hooks
87. https://www.geeksforgeeks.org/reactjs/reactjs-router/
88. https://github.com/sergeyleschev/react-custom-hooks
89. https://reactrouter.com/start/library/routing
90. https://cekrem.github.io/posts/beyond-react-memo-smarter-performance-optimization/
91. https://blog.saeloun.com/2023/07/06/react-error-boundaries/
92. https://enzymejs.github.io/enzyme/
93. https://legacy.reactjs.org/docs/uncontrolled-components.html
94. https://www.testim.io/blog/what-is-the-difference-between-jest-and-enzyme/
95. https://www.youtube.com/watch?v=OQQAv8t3bfc
96. https://stackoverflow.com/questions/37427508/react-changing-an-uncontrolled-input
97. https://preactjs.com/guide/v10/unit-testing-with-enzyme/
98. https://refine.dev/blog/react-error-boundaries/
99. https://www.reddit.com/r/reactjs/comments/1e4jj3n/controlled_or_uncontrolled_form_elements/