DevzConnect - Discover Answers & Share your knowledge

Asked: February 20, 2025In: ReactJs

How do you pass data between components?

Added an answer on February 22, 2025 at 5:31 am

How to Pass Data Between React Components In React, passing data between components is a fundamental concept that allows components to communicate and share information. There are several ways to pass data depending on the relationship between the components. Here's an overview: ✅ 1️⃣ Passing Data fRead more

How to Pass Data Between React Components

In React, passing data between components is a fundamental concept that allows components to communicate and share information. There are several ways to pass data depending on the relationship between the components. Here’s an overview:

✅ 1️⃣ Passing Data from Parent to Child (Props):

Props (short for properties) allow a parent component to pass data to its child components. This is the most common method of data flow in React.

Example:

// Parent Component
const Parent = () => {
const message = "Hello, I am passing data!";

return <Child data={message} />;
};

// Child Component
const Child = ({ data }) => {
return <h1>{data}</h1>;
};

In the example above, Parent passes the message as a prop to Child.
In Child, the data is accessed via props.data.

✅ 2️⃣ Passing Data from Child to Parent (Callback Functions):

To pass data from a child to a parent, the parent provides a callback function (a function passed as a prop) to the child. The child can then call this function, passing the data as an argument.

Example:

// Parent Component
const Parent = () => {
const handleData = (childData) => {
console.log("Data from child:", childData);
};

return <Child sendData={handleData} />;
};

// Child Component
const Child = ({ sendData }) => {
const data = "This is data from child!";

return <button onClick={() => sendData(data)}>Send Data to Parent</button>;

};

The Parent passes a handleData function to the Child component.
When the button is clicked in Child, the sendData function (which is the handleData from the parent) is called, sending data back to the parent.

✅ 3️⃣ Passing Data Between Sibling Components (Lift State Up):

If two sibling components need to share data, you’ll lift the state up to their common parent. The parent will then pass the data to each child as props.

Example:

// Parent Component
const Parent = () => {
const [data, setData] = useState("Initial Data");

const updateData = (newData) => {
setData(newData);
};

return (
<>
<ChildA data={data} updateData={updateData} />
<ChildB data={data} />
</>
);
};

// ChildA (updates data)
const ChildA = ({ data, updateData }) => {
return (
<div>
<h1>{data}</h1>
<button onClick={() => updateData("Data from ChildA")}>Update Data</button>
</div>
);
};

// ChildB (displays data)
const ChildB = ({ data }) => {
return <h2>{data}</h2>;
};

ChildA can update the state in the parent via the updateData function.
The updated state is then passed to ChildB as a prop, and it renders the updated data.

✅ 4️⃣ Passing Data with Context API (Global Data Sharing):

For more complex applications, when you need to pass data deeply through many layers of components, React Context API is useful. It allows data to be shared globally, avoiding prop drilling.

Example:

// Context Setup
const DataContext = createContext();

// Parent Component (provides data)
const Parent = () => {
const data = "Data from Context!";

return (
<DataContext.Provider value={data}>
<Child />
</DataContext.Provider>
);
};

// Child Component (consumes data)
const Child = () => {
const data = useContext(DataContext);
return <h1>{data}</h1>;
};

Parent provides data via DataContext.Provider.
Child accesses that data using useContext(DataContext).

✅ 5️⃣ Passing Data with Redux (Global State Management):

For even more complex state management across many components, Redux can be used to store global application state. It provides a centralized store that can be accessed and modified by any component.

Example:

// Redux Store (simplified)
const initialState = { message: "Hello from Redux" };

const reducer = (state = initialState, action) => {
switch (action.type) {
case "UPDATE_MESSAGE":
return { ...state, message: action.payload };
default:
return state;
}
};

// Parent Component (connects to Redux store)
const Parent = () => {
const message = useSelector(state => state.message);
const dispatch = useDispatch();

const updateMessage = () => {
dispatch({ type: "UPDATE_MESSAGE", payload: "New message from Redux!" });
};

return (
<div>
<h1>{message}</h1>
<button onClick={updateMessage}>Update Message</button>
</div>
);
};

The Redux store manages global state, and components can access and update this state using the useSelector and useDispatch hooks.

✅ 6️⃣ Passing Data via URL Parameters (Routing):

If you’re working with routing (e.g., with React Router), you can pass data between components through URL parameters.

Example:

// App.js (using React Router)
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const App = () => (
<Router>
<Link to="/profile/123">Go to Profile</Link>

<Route path="/profile/:id" component={Profile} />
</Router>


);

// Profile Component (receives data via URL params)
const Profile = ({ match }) => {
const { id } = match.params; // id is passed through the URL
return <h1>Profile ID: {id}</h1>;
};

The Profile component gets the id from the URL via match.params.

🔥 Summary of Methods to Pass Data Between Components:

Parent to Child: Using props
Child to Parent: Using callback functions
Sibling to Sibling: By lifting state up to a common parent
Global Data: Using Context API or Redux
Routing Data: Via URL parameters

See less

Asked: February 20, 2025In: ReactJs

What are the differences between class and functional components in React?

Finn Phillips Beginner

Added an answer on February 22, 2025 at 5:28 am

React initially relied heavily on class components, but with the introduction of hooks in React 16.8, functional components became the go-to choice for most developers. ✅ 1️⃣ Key Differences: Feature Class Components Functional Components Syntax ES6 Classes JavaScript Functions State Management UsesRead more

React initially relied heavily on class components, but with the introduction of hooks in React 16.8, functional components became the go-to choice for most developers.

✅ 1️⃣ Key Differences:

Feature	Class Components	Functional Components
Syntax	ES6 Classes	JavaScript Functions
State Management	Uses `this.state` and `this.setState()`	Uses `useState` hook
Lifecycle Methods	`componentDidMount`, `componentDidUpdate`, etc.	`useEffect` hook
Hooks Support	❌ (Can’t use hooks directly)	✅ (Supports hooks)
`this` Keyword	Required (`this.props`, `this.state`)	Not needed
Readability	More verbose	Concise & cleaner
Performance	Slightly heavier (due to method bindings)	Lighter & faster
Adoption Post-Hooks	Less commonly used	Industry standard

🛠️ 2️⃣ Code Examples:

🔹 Class Component:

import React, { Component } from 'react';

class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

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

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

export default Counter;

🔹 Functional Component (with Hooks):

import React, { useState } from 'react';

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

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

export default Counter;

✅ 3️⃣ Lifecycle Methods vs useEffect:

🔹 Class Component Lifecycle:

componentDidMount — after component mounts
componentDidUpdate — after component updates
componentWillUnmount — before unmounting

🔹 Equivalent in Functional Components:

Using useEffect:

import React, { useEffect } from 'react';

useEffect(() => {
console.log("Component mounted!");

return () => {
console.log("Component unmounted!"); // Cleanup
};
}, []); // Empty dependency array mimics componentDidMount

🔥 4️⃣ When to Use Class vs Functional Components:

Scenario	Recommended Approach
New Projects	✅ Functional Components
Legacy Codebases	⚡ Might still use Classes
Simple UI (No State/Effects)	✅ Functional Components
Complex State or Side Effects	✅ Functional (with Hooks)
Third-Party Libraries Dependent on Classes	⚡ Class Components (rare)

⚡ 5️⃣ Why Functional Components Are Preferred Today:

Hooks unlocked their full potential — state, effects, refs, context, etc.
Cleaner & less boilerplate — no constructors, bindings, or this.
Easier to test and refactor.
Better performance — lighter footprint without class overhead.

💡 6️⃣ Fun Fact:

The React team recommends functional components for almost all new development.
Features like React Server Components and Concurrent Mode are designed with functional components in mind.

See less

Asked: February 20, 2025In: ReactJs

What is the Virtual DOM and how does React use it?

Finn Phillips Beginner

Added an answer on February 22, 2025 at 5:26 am

⚡ What is the Virtual DOM in React? The Virtual DOM (VDOM) is an in-memory, lightweight representation of the actual DOM in your browser. React uses it to optimize UI rendering, ensuring updates are fast and efficient. ✅ 1️⃣ How the Virtual DOM Works: Initial Render: React creates a Virtual DOM treeRead more

⚡ What is the Virtual DOM in React?

The Virtual DOM (VDOM) is an in-memory, lightweight representation of the actual DOM in your browser. React uses it to optimize UI rendering, ensuring updates are fast and efficient.

✅ 1️⃣ How the Virtual DOM Works:

Initial Render:
- React creates a Virtual DOM tree based on your component structure.
- This virtual tree is then used to render the actual DOM in the browser.
State/Prop Changes:
- When state or props change, React creates a new Virtual DOM.
- It doesn’t directly touch the real DOM right away.
Diffing Algorithm:
- React compares the new Virtual DOM with the previous one using its Reconciliation algorithm.
- It identifies what has changed (this process is called “diffing”).
Efficient Updates:
- Only the parts of the actual DOM that changed are updated.
- This minimizes expensive DOM manipulations, leading to faster performance.

⚡ 2️⃣ Virtual DOM vs Real DOM:

Aspect	Virtual DOM	Real DOM
Location	Memory (in JavaScript)	Browser
Speed of Updates	Fast (batch updates)	Slow (direct updates)
Re-rendering	Selective (only changed elements)	Full re-render (even if minor)
Performance	Optimized with diffing and batching	Costly and time-consuming

✅ 3️⃣ React’s Virtual DOM Workflow:

🛠️ 4️⃣ Example (With and Without VDOM):

Without Virtual DOM:
Every time you type in an input field, the entire page might re-render.
With Virtual DOM (React):
Only the specific input field updates — the rest of the page remains untouched.

⚡ 5️⃣ Why Is Virtual DOM Fast?

Batch Updates:
- React groups multiple changes and updates the DOM in a single pass.
Minimized Reflows/Repaints:
- Direct DOM manipulations can cause layout shifts (reflows/repaints), but the VDOM minimizes them.
Asynchronous Rendering:
- React 18’s Concurrent Mode allows certain updates to happen in the background, improving user experience.

🔥 6️⃣ Real-World Benefit:

Imagine an app with a dynamic list (e.g., a chat app). When a new message arrives:

Without VDOM: The entire list might re-render, causing flickers or lag.
With VDOM: Only the new message gets added, keeping the app smooth.

💡 7️⃣ Bonus:

Frameworks like Vue.js also use a Virtual DOM.
But React’s diffing algorithm is highly optimized, making it lightweight and fast.

See less

Asked: February 20, 2025In: ReactJs

How do you implement drag and drop in React?

Finn Phillips Beginner

Added an answer on February 22, 2025 at 5:23 am

⚡ Implementing Drag and Drop in React You can implement drag and drop in React using either: Native HTML5 Drag & Drop API (for simple cases) Libraries like react-beautiful-dnd or react-dnd (for complex interactions) Let me walk you through both approaches. 🚀 ✅ 1️⃣ Native HTML5 Drag & Drop APRead more

⚡ Implementing Drag and Drop in React

You can implement drag and drop in React using either:

Native HTML5 Drag & Drop API (for simple cases)
Libraries like react-beautiful-dnd or react-dnd (for complex interactions)

Let me walk you through both approaches. 🚀

✅ 1️⃣ Native HTML5 Drag & Drop API (Simple Example)

Here’s how to create a simple draggable list where you can reorder items.

🛠️ Example: Draggable List

import { useState } from 'react';

const DraggableList = () => {
const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
const [draggedItemIndex, setDraggedItemIndex] = useState(null);

const handleDragStart = (index) => setDraggedItemIndex(index);

const handleDragOver = (e) => e.preventDefault();

const handleDrop = (index) => {
const updatedItems = [...items];
const [draggedItem] = updatedItems.splice(draggedItemIndex, 1);
updatedItems.splice(index, 0, draggedItem);
setItems(updatedItems);
setDraggedItemIndex(null);
};

return (
<ul>
{items.map((item, index) => (
<li
key={item}
draggable
onDragStart={() => handleDragStart(index)}
onDragOver={handleDragOver}
onDrop={() => handleDrop(index)}
style={{
padding: '10px',
margin: '5px',
backgroundColor: '#f0f0f0',
border: '1px solid #ccc',
cursor: 'grab',
}}
>
{item}
</li>
))}
</ul>
);
};

export default DraggableList;

⚡ Key Concepts:

draggable: Makes the item draggable.
onDragStart: Captures the index of the dragged item.
onDragOver: Prevents the default to allow dropping.
onDrop: Reorders items when dropped.

✅ 2️⃣ Using `react-beautiful-dnd` (Advanced Drag & Drop)

For more complex UIs (like Trello-style boards), use react-beautiful-dnd.

📦 Install the Library:

🛠️ Example: Reorderable List with `react-beautiful-dnd`

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { useState } from 'react';

const DnDList = () => {
const [items, setItems] = useState([
{ id: '1', content: 'Item 1' },
{ id: '2', content: 'Item 2' },
{ id: '3', content: 'Item 3' },
]);

const handleOnDragEnd = (result) => {
if (!result.destination) return;

const updatedItems = Array.from(items);
const [movedItem] = updatedItems.splice(result.source.index, 1);
updatedItems.splice(result.destination.index, 0, movedItem);

setItems(updatedItems);
};

return (
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="droppable-list">
{(provided) => (
<ul {...provided.droppableProps} ref={provided.innerRef}>
{items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<li
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
userSelect: 'none',
padding: '10px',
margin: '5px',
backgroundColor: snapshot.isDragging ? '#d3d3d3' : '#f0f0f0',
border: '1px solid #ccc',
...provided.draggableProps.style,
}}
>
{item.content}
</li>
)}
</Draggable>
))}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
);
};

export default DnDList;

⚡ Key Concepts in `react-beautiful-dnd`:

DragDropContext: The root wrapper.
Droppable: Defines a drop zone (like a list or board).
Draggable: Makes an item draggable.
onDragEnd: Handles what happens after a drag ends (e.g., reorder items).

🔥 Which Approach Should You Use?

🟢 Native API → Great for simple drag and drop (like moving a single item).
🔥 react-beautiful-dnd → Best for complex UIs (e.g., Kanban boards, multi-lists).

See less

Asked: February 20, 2025In: ReactJs

What are progressive web apps (PWAs) with React?

Finn Phillips Beginner

Added an answer on February 22, 2025 at 5:21 am

⚡ What Are Progressive Web Apps (PWAs)? A Progressive Web App (PWA) is a web application that combines the best of web and native apps. PWAs work in the browser but can behave like native apps — offline support, push notifications, and even installable on devices. 🏗️ Think of it as: A web app that fRead more

⚡ What Are Progressive Web Apps (PWAs)?

A Progressive Web App (PWA) is a web application that combines the best of web and native apps. PWAs work in the browser but can behave like native apps — offline support, push notifications, and even installable on devices.

🏗️ Think of it as: A web app that feels and acts like a native app but runs in the browser.

🚀 Key Features of PWAs:

✅ Offline Support: Works without an internet connection.
✅ Installable: Add to home screen without going through app stores.
✅ Fast & Reliable: Caches assets using service workers.
✅ Push Notifications: Engages users like native apps.
✅ Responsive: Works on mobile, tablet, desktop.

🛠️ How to Build a PWA with React?

React makes it easy to create PWAs, especially with Create React App (CRA).

✅ Step-by-Step Guide to Build a React PWA

1️⃣ Create React App with PWA Support:

CRA comes with a service worker setup. It’s just disabled by default.

2️⃣ Enable Service Worker:

Open src/main.jsx (or index.js depending on your version) and replace:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

ReactDOM.render(<App />, document.getElementById('root'));

// Register the service worker
serviceWorkerRegistration.register();

The serviceWorkerRegistration.register() will enable offline caching and other PWA features.

3️⃣ Configure `manifest.json`:

Located in public/manifest.json — defines how your app appears when installed.

{
"short_name": "MyPWA",
"name": "My Progressive Web App",
"icons": [
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"background_color": "#ffffff",
"display": "standalone",
"theme_color": "#000000"
}

display: standalone makes it look like a native app (no browser UI).
Icons: Make sure to provide proper icons for different resolutions.

4️⃣ Add a Web App Install Banner:

You can prompt users to install your app.

useEffect(() => {
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;

// Show install button
const installButton = document.getElementById('installBtn');
installButton.style.display = 'block';

installButton.addEventListener('click', () => {
deferredPrompt.prompt();
deferredPrompt.userChoice.then((choice) => {
if (choice.outcome === 'accepted') {
console.log('User installed the app');
} else {
console.log('User dismissed the install');
}
});
});
});
}, []);

5️⃣ Run the PWA Locally:

PWAs require HTTPS (or localhost) to work properly.

🔥 Bonus: Advanced PWA Features

Push Notifications:
Use Firebase Cloud Messaging (FCM) for real-time notifications.
Background Sync:
Allows syncing data when the app regains connectivity.
Custom Caching Strategies:
Use libraries like Workbox to customize caching (e.g., cache images, APIs).

💡 Best Practices for React PWAs:

✅ Optimize images & assets for faster load times.
✅ Use lazy loading for components (React.lazy).
✅ Regularly update your service worker to avoid cache issues.
✅ Monitor performance using Lighthouse (Chrome DevTools → Audits).

See less

Asked: February 20, 2025In: ReactJs

What is Context API?

Finn Phillips Beginner

Added an answer on February 22, 2025 at 5:18 am

⚡ What is React Context API? The Context API in React provides a way to share state or data across your component tree without passing props manually at every level (a.k.a "prop drilling"). 🏗️ Think of it as: A global store for React components — but lightweight and built-in. 🚀 When to Use Context ARead more

⚡ What is React Context API?

The Context API in React provides a way to share state or data across your component tree without passing props manually at every level (a.k.a “prop drilling”).

🏗️ Think of it as: A global store for React components — but lightweight and built-in.

🚀 When to Use Context API?

✅ Great for sharing:

✅ User authentication (e.g., user object)
✅ Theme toggles (e.g., dark/light mode)
✅ Localization (e.g., language settings)
✅ App-wide settings (e.g., feature flags)

❌ Not for:

High-frequency updates (like real-time data) — it can cause performance issues due to unnecessary re-renders.
In such cases, Redux or state management libraries might be better.

🛠️ Context API — How It Works

Create Context — using React.createContext()
Provide Context — using the <Context.Provider>
Consume Context — using useContext() hook

✅ Example: Theme Toggle Using Context API

1️⃣ Create the Context:

// ThemeContext.js
import { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
};

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

2️⃣ Use the Provider in App:

// App.js
import { ThemeProvider } from './ThemeContext';
import Dashboard from './Dashboard';

const App = () => (
<ThemeProvider>
<Dashboard />
</ThemeProvider>
);

3️⃣ Consume Context in Components:

// Dashboard.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Dashboard = () => {
const { theme, toggleTheme } = useContext(ThemeContext);

return (
<div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff', padding: '20px' }}>
<h1>{theme === 'light' ? 'Light Mode' : 'Dark Mode'}</h1>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
);
};

⚡ How It Works:

ThemeProvider wraps the app and makes the theme data available to any child component.
useContext(ThemeContext) allows components like Dashboard to access and manipulate the shared theme state.
Toggling the theme updates the context and causes subscribed components to re-render.

🔥 Using Context API + `useReducer` for Complex State:

For more complex state logic, combine Context with useReducer — almost like a lightweight Redux.

💡 Best Practices for Context API:

Split Contexts: Use multiple smaller contexts instead of one large global context. (e.g., separate AuthContext, ThemeContext).
Memoization: Wrap context values in useMemo to avoid unnecessary re-renders.
Performance: Avoid using Context for frequently updating values (like real-time data) — it can lead to performance bottlenecks.

See less

Asked: February 20, 2025In: ReactJs

What are micro-frontends and how do they work with React?

Finn Phillips Beginner

Added an answer on February 22, 2025 at 5:16 am

⚡ What Are Micro-Frontends? Micro-frontends apply the principles of microservices to the frontend. Instead of building a monolithic frontend app, micro-frontends divide it into smaller, independent pieces, where each team can develop, test, and deploy their feature or module independently. 🏗️ ThinkRead more

⚡ What Are Micro-Frontends?

Micro-frontends apply the principles of microservices to the frontend. Instead of building a monolithic frontend app, micro-frontends divide it into smaller, independent pieces, where each team can develop, test, and deploy their feature or module independently.

🏗️ Think of it as: Multiple mini React apps (or other frameworks) working together to form a single cohesive app.

🚀 Why Use Micro-Frontends?

Scalability: Different teams can work on different features without stepping on each other’s toes.
Tech Agnostic: You can mix React, Vue, Angular, etc., in the same app (though usually avoided unless necessary).
Independent Deployment: Each micro-frontend can be deployed independently.
Improved Maintainability: Smaller codebases are easier to manage.

🛠️ Micro-Frontends with React: Approaches & Tools

1️⃣ Module Federation (Webpack 5) 🔗

The most popular way to build micro-frontends in React today.

Key Concept: Share modules between apps at runtime.

Example Setup:

Host App — Main shell.
Remote App — A micro-frontend exposed via module federation.

Webpack Config (Remote App):

// webpack.config.js
module.exports = {
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button', // Exposing a component
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
};

Webpack Config (Host App):

Usage in React:

import React, { Suspense } from 'react';

const RemoteButton = React.lazy(() => import('remoteApp/Button'));

const App = () => (
<Suspense fallback={<div>Loading...</div>}>
<RemoteButton />
</Suspense>
);

🔥 Pros:

Dynamic loading at runtime.
Strong ecosystem support.

⚠️ Cons:

Complex webpack configuration.
Version mismatches can cause issues.

2️⃣ iFrames 🖼️

The simplest form of micro-frontends.

Each micro-frontend runs in its own iframe.
Communicate using postMessage API.

🔥 Pros:

Strong isolation.
Simple to implement.

⚠️ Cons:

Poor UX due to page reloads and styling issues.
SEO and accessibility challenges.

3️⃣ Single SPA 🏛️

A micro-frontend framework that helps multiple frameworks coexist (React, Vue, Angular, etc.).

Manages routing and rendering for multiple apps.

Example Setup:

🔥 Pros:

Framework-agnostic.
Handles routing and lifecycles.

⚠️ Cons:

Steeper learning curve.
Can lead to bloated JS bundles.

4️⃣ Micro-Frontends via SSR (Next.js) 🌐

Next.js can be used to stitch micro-frontends on the server side.

You can render micro-frontend apps on the server and send a single HTML file to the client.
Useful for SEO-heavy apps.

⚡ When Should You Use Micro-Frontends?

✅ Best For:

Large-scale applications with multiple teams.
Complex projects where independent deployments are needed.

❌ Not Ideal For:

Small to medium-sized apps.
Projects without strong CI/CD pipelines.

💡 Best Practices:

Shared Libraries: Use module federation or monorepos to share common dependencies.
Consistent UI: Implement a design system to maintain consistency.
Version Control: Handle dependency mismatches between micro-frontends carefully.
Communication: Define clear contracts between micro-frontends (e.g., using events or shared state).

See less

Sign Up

Sign In

Forgot Password

Empowering Developers to Learn, Share, and Grow

How to Pass Data Between React Components

✅ 1️⃣ Passing Data from Parent to Child (Props):

Example:

✅ 2️⃣ Passing Data from Child to Parent (Callback Functions):

Example:

✅ 3️⃣ Passing Data Between Sibling Components (Lift State Up):

Example:

✅ 4️⃣ Passing Data with Context API (Global Data Sharing):

Example:

✅ 5️⃣ Passing Data with Redux (Global State Management):

Example:

✅ 6️⃣ Passing Data via URL Parameters (Routing):

Example:

🔥 Summary of Methods to Pass Data Between Components:

✅ 1️⃣ Key Differences:

🛠️ 2️⃣ Code Examples:

🔹 Class Component:

🔹 Functional Component (with Hooks):

✅ 3️⃣ Lifecycle Methods vs useEffect:

🔹 Class Component Lifecycle:

🔹 Equivalent in Functional Components:

🔥 4️⃣ When to Use Class vs Functional Components:

⚡ 5️⃣ Why Functional Components Are Preferred Today:

💡 6️⃣ Fun Fact:

⚡ What is the Virtual DOM in React?

✅ 1️⃣ How the Virtual DOM Works:

⚡ 2️⃣ Virtual DOM vs Real DOM:

✅ 3️⃣ React’s Virtual DOM Workflow:

🛠️ 4️⃣ Example (With and Without VDOM):

⚡ 5️⃣ Why Is Virtual DOM Fast?

🔥 6️⃣ Real-World Benefit:

💡 7️⃣ Bonus:

⚡ Implementing Drag and Drop in React

✅ 1️⃣ Native HTML5 Drag & Drop API (Simple Example)

🛠️ Example: Draggable List

⚡ Key Concepts:

✅ 2️⃣ Using react-beautiful-dnd (Advanced Drag & Drop)

📦 Install the Library:

🛠️ Example: Reorderable List with react-beautiful-dnd

⚡ Key Concepts in react-beautiful-dnd:

🔥 Which Approach Should You Use?

⚡ What Are Progressive Web Apps (PWAs)?

🚀 Key Features of PWAs:

🛠️ How to Build a PWA with React?

✅ Step-by-Step Guide to Build a React PWA

1️⃣ Create React App with PWA Support:

2️⃣ Enable Service Worker:

3️⃣ Configure manifest.json:

4️⃣ Add a Web App Install Banner:

5️⃣ Run the PWA Locally:

🔥 Bonus: Advanced PWA Features

💡 Best Practices for React PWAs:

⚡ What is React Context API?

🚀 When to Use Context API?

🛠️ Context API — How It Works

✅ Example: Theme Toggle Using Context API

1️⃣ Create the Context:

2️⃣ Use the Provider in App:

⚡ How It Works:

🔥 Using Context API + useReducer for Complex State:

💡 Best Practices for Context API:

⚡ What Are Micro-Frontends?

🚀 Why Use Micro-Frontends?

🛠️ Micro-Frontends with React: Approaches & Tools

1️⃣ Module Federation (Webpack 5) 🔗

Example Setup:

2️⃣ iFrames 🖼️

3️⃣ Single SPA 🏛️

4️⃣ Micro-Frontends via SSR (Next.js) 🌐

⚡ When Should You Use Micro-Frontends?

💡 Best Practices:

✅ 2️⃣ Using `react-beautiful-dnd` (Advanced Drag & Drop)

🛠️ Example: Reorderable List with `react-beautiful-dnd`

⚡ Key Concepts in `react-beautiful-dnd`:

3️⃣ Configure `manifest.json`:

🔥 Using Context API + `useReducer` for Complex State: