React Concepts with Code Examples
React Concepts with Code Examples
1. Virtual DOM
// Explanation:
// The Virtual DOM is a lightweight JavaScript representation of the actual DOM.
// React updates the Virtual DOM first and then efficiently updates the real DOM.
// Example:
function App() {
return <h1>Hello, Virtual DOM!</h1>;
}
2. useState Hook
// Explanation:
// useState allows functional components to have state.
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>
);
}
3. useEffect Hook
// Explanation:
// useEffect runs side effects like fetching data, subscriptions, or manually changing
the DOM.
import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <p>Timer: {count}s</p>;
}
4. Different React Hooks
// Common hooks in React:
1. useState - Manages state in function components.
2. useEffect - Handles side effects.
3. useContext - Provides a way to pass data deeply without prop drilling.
4. useReducer - Similar to useState but for complex state logic.
5. useMemo - Optimizes performance by memoizing values.
6. useCallback - Optimizes functions to avoid unnecessary re-renders.
5. useMemo Hook
// Explanation:
// useMemo caches computed values to prevent unnecessary recalculations.
import React, { useState, useMemo } from 'react';
function ExpensiveCalculation({ num }) {
const squaredValue = useMemo(() => {
console.log("Calculating...");
return num * num;
}, [num]);
return <p>Squared Value: {squaredValue}</p>;
}
6. useCallback Hook
// Explanation:
// useCallback memoizes a function to prevent unnecessary re-creation.
import React, { useState, useCallback } from 'react';
function Button({ onClick }) {
console.log("Button rendered");
return <button onClick={onClick}>Click Me</button>;
}
function App() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []);
return (
<div>
<p>Count: {count}</p>
<Button onClick={handleClick} />
</div>
);
}
7. useSuspense Hook
// Explanation:
// Suspense is used for lazy loading components.
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
8. Redux Data Flow
// Explanation:
// Redux follows a unidirectional data flow:
// Action -> Reducer -> Store -> View (Component).
// Example:
import { createStore } from 'redux';
const initialState = { count: 0 };
function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}
const store = createStore(counterReducer);
store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }
