Scribd
Upload
3 views

React Concepts With Code

The document outlines key React concepts with code examples, including the Virtual DOM, useState and useEffect hooks, and various other hooks like useMemo and useCallback. It also explains the Redux data flow, illustrating how actions, reducers, and the store interact. Each concept is accompanied by a simple code snippet to demonstrate its usage in functional components.

Uploaded by

Kowsalya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

React Concepts With Code

The document outlines key React concepts with code examples, including the Virtual DOM, useState and useEffect hooks, and various other hooks like useMemo and useCallback. It also explains the Redux data flow, illustrating how actions, reducers, and the store interact. Each concept is accompanied by a simple code snippet to demonstrate its usage in functional components.

Uploaded by

Kowsalya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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 }

You might also like