DEV Community: Vivek Kurmi

Composite Design Pattern in Java

Vivek Kurmi — Sat, 18 Nov 2023 18:35:50 +0000

Let's consider a scenario where the Composite Pattern is applied in the context of making API calls. Imagine you have an API that provides information about various entities, and you want to create a unified way to handle both individual API calls and composite API calls that involve multiple entities.

Step-by-Step Explanation:

Step 1: Define a Common Interface

// Step 1: Define a common interface for both individual API calls and composites
public interface ApiCall {
    void execute();
}

Step 2: Create Concrete Classes for Individual API Calls

// Step 2: Create concrete classes for individual API calls
public class SingleEntityApiCall implements ApiCall {
    private String entity;

    public SingleEntityApiCall(String entity) {
        this.entity = entity;
    }

    public void execute() {
        System.out.println("Executing API call for entity: " + entity);
        // Actual logic to make the API call and handle the response
    }
}

Step 3: Create a Composite Class for API Composites

// Step 3: Create a composite class for API composites
import java.util.ArrayList;
import java.util.List;

public class CompositeApiCall implements ApiCall {
    private List<ApiCall> apiCalls = new ArrayList<>();

    public void addApiCall(ApiCall apiCall) {
        apiCalls.add(apiCall);
    }

    public void execute() {
        System.out.println("Executing Composite API call:");
        for (ApiCall apiCall : apiCalls) {
            apiCall.execute();
        }
    }
}

Step 4: Putting It All Together

// Step 4: Putting it all together in the main program
public class ApiCallExample {
    public static void main(String[] args) {
        // Create individual API calls
        ApiCall singleEntityCall1 = new SingleEntityApiCall("Entity1");
        ApiCall singleEntityCall2 = new SingleEntityApiCall("Entity2");

        // Create a composite API call and add individual calls
        CompositeApiCall compositeApiCall = new CompositeApiCall();
        compositeApiCall.addApiCall(singleEntityCall1);
        compositeApiCall.addApiCall(singleEntityCall2);

        // Execute API calls
        singleEntityCall1.execute();
        singleEntityCall2.execute();
        compositeApiCall.execute();
    }
}

Output:

Executing API call for entity: Entity1
Executing API call for entity: Entity2
Executing Composite API call:
Executing API call for entity: Entity1
Executing API call for entity: Entity2

In this example, the ApiCall interface serves as a common ground for both individual API calls (SingleEntityApiCall) and composite API calls (CompositeApiCall). The CompositeApiCall class can contain a collection of various API calls, creating a hierarchical structure. The execute method is implemented recursively, allowing you to perform API calls at different levels of the hierarchy.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Server-Side Rendering (SSR) in React

Vivek Kurmi — Sat, 18 Nov 2023 17:40:00 +0000

Server-Side Rendering is a technique in React where the initial rendering of the application takes place on the server rather than in the browser. This can improve the perceived performance and search engine optimization (SEO) of your application.

Server-Side Rendering

SSR involves rendering the initial HTML content on the server and sending it to the browser. This can improve the time-to-interactive for users and provide better SEO by delivering fully rendered HTML to search engines.

Let's walk through an example of setting up a basic SSR React application using Next.js.

Step 1: Problem Code

Consider a typical CSR React application where the initial rendering occurs on the client side.

// App.js
import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, Server-Side Rendering!</h1>
    </div>
  );
};

export default App;

Step 2: Solution - Server-Side Rendering with Next.js

Let's use Next.js to implement SSR for our React application.

Install Next.js:

   npm install next react react-dom

Next.js simplifies the process of implementing server-side rendering in a React application.
- By default, pages inside the pages directory in your project are treated as server-side rendered routes.

Create pages/index.js in your project directory:

   // pages/index.js
   import React from 'react';

   const Home = () => (
     <div>
       <h1>Hello, Server-Side Rendering!</h1>
     </div>
   );

   export default Home;

Create a custom script in your package.json for running Next.js:

   "scripts": {
     "dev": "next dev"
   }

Run the application:

   npm run dev

Now, your application is running with server-side rendering. When you access http://localhost:3000 in your browser, you'll receive the fully rendered HTML from the server.

By using Next.js for server-side rendering, you get the benefits of faster initial page loads and improved SEO. The server sends fully rendered HTML to the browser, which can be especially advantageous for content-heavy applications and public-facing websites.

Here are some popular React server-side rendering frameworks with documentation links:

Next.js:
- Documentation
- Description: A comprehensive React framework supporting server-side rendering and more.
Gatsby:
- Documentation
- Description: A static site generator for React with server-side rendering capabilities.
Razzle:
- Documentation
- Description: A zero-config framework for server-rendered React applications.
After.js:
- Documentation
- Description: A server-side rendering framework built on React Router.
NestJS:
- Documentation
- Description: A server-side framework for building scalable applications with Node.js, capable of SSR with React.

Please check the documentation for each framework for detailed information and usage guidelines.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Lazy Loading in React

Vivek Kurmi — Sat, 18 Nov 2023 17:33:20 +0000

Lazy loading is a technique in React where you delay the loading of a component or module until it's actually needed. This can improve the initial loading performance of your application by loading only the necessary code for the current view.

Let's go through an example of lazy loading a component using React's React.lazy function and the Suspense component.

Step 1: Problem Code

In larger React applications, loading all components and modules upfront can result in a slower initial page load. Users may have to wait for unnecessary code to download even if they don't interact with certain parts of the application.

Consider a scenario where you have a large application, and you're importing a component that is not needed on the initial page load.

import React from 'react';
import BigComponent from './BigComponent';

const App = () => {
  // Some other code...

  return (
    <div>
      {/* Unnecessarily loading BigComponent upfront */}
      <BigComponent />
    </div>
  );
};

In this code, BigComponent is loaded upfront, even if the user might not interact with it immediately.

Step 2: Solution - Lazy Loading

Lazy loading allows you to load specific components or modules only when they are required, reducing the initial bundle size and improving the performance.

Let's use lazy loading to load BigComponent only when it's actually needed.

import React, { lazy, Suspense } from 'react';

// Lazy-loaded component using React.lazy
const BigComponent = lazy(() => import('./BigComponent'));

const App = () => {
  // Some other code...

  return (
    <div>
      {/* Lazy loading BigComponent */}
      <Suspense fallback={<div>Loading...</div>}>
        <BigComponent />
      </Suspense>
    </div>
  );
};

Step-by-Step Explanation:

Lazy Loading Setup:

   const BigComponent = lazy(() => import('./BigComponent'));

Use React.lazy to create a lazy-loaded version of the component. The argument to import is a function that returns a dynamic import statement.

Using Suspense Component:

   <Suspense fallback={<div>Loading...</div>}>
     <BigComponent />
   </Suspense>

Wrap the lazy-loaded component with the Suspense component. The fallback prop defines what to render while the lazy component is loading.

Result:
- On the initial page load, only the necessary code is loaded.
- If BigComponent is needed, it will be loaded asynchronously, and the loading fallback will be displayed during the loading process.

Lazy loading helps optimize the initial load time of your application by deferring the loading of certain components until they are required. This can lead to a better user experience, especially in applications with large codebases.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Error Boundaries in React

Vivek Kurmi — Sat, 18 Nov 2023 17:29:07 +0000

Error boundaries are a feature in React that allows you to catch JavaScript errors anywhere in a component tree and log those errors, display a fallback UI, or take other actions to gracefully handle errors without crashing the entire application.

Error boundaries provide a way to catch errors within a component tree and handle them gracefully, preventing the entire application from crashing.

Let's go through an example of using error boundaries to handle errors in a React component.

Step 1: Problem Code

When an error occurs in a React component, it can propagate up the component tree and eventually lead to the entire application crashing. This behavior can be undesirable, especially in production, as it leaves the user with a blank screen and provides no information about what went wrong.

import React, { useState } from 'react';

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

  // Simulating an error by accessing a property on 'null'
  const handleClick = () => {
    console.log(data.id); // This will throw an error
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

In this example, clicking the button triggers an error by trying to access the id property of null.

Step 2: Solution - Error Boundaries

Let's use an error boundary to catch and handle the error gracefully.

import React, { useState } from 'react';

// Error boundary component
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  // This lifecycle method is called when an error occurs
  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true });
    // Log the error to a logging service
    console.error('Error:', error);
    console.error('Error Info:', errorInfo);
  }

  render() {
    // Display a fallback UI if an error occurs
    if (this.state.hasError) {
      return <p>Something went wrong. Please try again later.</p>;
    }

    // Render the children if no error has occurred
    return this.props.children;
  }
}

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

  const handleClick = () => {
    console.log(data.id); // This will throw an error
  };

  return (
    // Wrap the error-prone component with the error boundary
    <ErrorBoundary>
      <div>
        <button onClick={handleClick}>Click Me</button>
      </div>
    </ErrorBoundary>
  );
};

Step-by-Step Explanation:

Error-Prone Component:

   const handleClick = () => {
     console.log(data.id); // This will throw an error
   };

In the error-prone component, clicking the button triggers an error by trying to access the id property of null.

Error Boundary Component:

   class ErrorBoundary extends React.Component {
     // ...
   }

We create an ErrorBoundary class component that extends React.Component. It has a state property hasError to track whether an error has occurred.

componentDidCatch Lifecycle Method:

   componentDidCatch(error, errorInfo) {
     this.setState({ hasError: true });
     // Log the error to a logging service
     console.error('Error:', error);
     console.error('Error Info:', errorInfo);
   }

The componentDidCatch lifecycle method is called when an error occurs within the component tree. It updates the state to indicate that an error has occurred and logs the error information.

Render Method of Error Boundary:

   render() {
     if (this.state.hasError) {
       return <p>Something went wrong. Please try again later.</p>;
     }
     return this.props.children;
   }

The render method of the error boundary checks if an error has occurred. If so, it displays a fallback UI. Otherwise, it renders the children components.

Using Error Boundary in Component:

   <ErrorBoundary>
     <div>
       <button onClick={handleClick}>Click Me</button>
     </div>
   </ErrorBoundary>

Wrap the error-prone component with the ErrorBoundary component to catch and handle errors gracefully.

By using error boundaries, you can prevent the entire application from crashing due to errors in specific components. Error boundaries provide a way to log errors, display meaningful error messages to users, and ensure a better user experience.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Immutable Data Patterns in React

Vivek Kurmi — Sat, 18 Nov 2023 17:25:24 +0000

The immutable pattern involves treating data as if it were immutable, meaning it cannot be changed directly. Instead of modifying existing data, you create a new copy with the desired changes.
This pattern is particularly relevant when working with React, as it helps prevent unexpected side effects and makes it easier to manage the state of your application.
This approach helps maintain a clear history of state changes and avoids unintended consequences.

Let's illustrate this with an example where we're updating an array of items in a React component.

Step 1: Problem Code - Mutating State Directly

In React, modifying the state directly can lead to unexpected behavior and make it challenging to track changes. This can result in bugs that are hard to identify and fix.

import React, { useState } from 'react';

const MutableList = () => {
  const [items, setItems] = useState(['item1', 'item2', 'item3']);

  const addItem = () => {
    // Directly modifying the state array
    items.push('newItem');
    setItems(items); // Incorrect! Does not trigger a re-render
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

In this example, we are directly modifying the items array and then setting the state with the same array. This can lead to issues because React may not recognize the change, as we are mutating the existing array.

Step 2: Solution - Immutable Pattern

Let's use the immutable pattern to update the array by creating a new copy.

import React, { useState } from 'react';

const ImmutableList = () => {
  const [items, setItems] = useState(['item1', 'item2', 'item3']);

  const addItem = () => {
    // Creating a new array with the new item
    const newItems = [...items, 'newItem'];
    setItems(newItems); // Correct! Triggers a re-render
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

Step-by-Step Explanation:

Problem Code:

   const addItem = () => {
     items.push('newItem');
     setItems(items); // Incorrect! Mutating the existing array
   };

In the problem code, we directly modify the items array and then set the state with the same array. This may not trigger a re-render because React might not recognize the change.

Solution Code:

   const addItem = () => {
     const newItems = [...items, 'newItem'];
     setItems(newItems); // Correct! Creating a new array and setting the state
   };

In the solution code, we use the spread operator (...) to create a new array with the existing items and the new item. This ensures that we are not mutating the original array, and React recognizes the state change, triggering a re-render.

By following the immutable pattern, we create a more predictable and maintainable codebase in React. It helps prevent bugs related to state mutations and improves the overall stability of your application.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Component Composition in React

Vivek Kurmi — Sat, 18 Nov 2023 17:16:20 +0000

Component composition is a design pattern in React where you build your UI by combining small, independent, and reusable components to create a larger and more complex component or application. It promotes the idea of breaking down your user interface into smaller, manageable pieces, making it easier to understand, maintain, and scale.

Problem: Lack of Reusability and Modularity

Suppose you have a complex UI component, and you realize that certain parts of it could be reused in other parts of your application. Without component composition, you might end up with large monolithic components that are hard to maintain and aren't easily reusable.

Solution: Component Composition

Let's create a simple example to illustrate component composition. We'll build a Card component that consists of smaller reusable components like Header, Body, and Footer.

Step 1: Problem Code

import React from 'react';

const MonolithicCard = () => {
  return (
    <div className="card">
      <div className="header">
        <h2>Title</h2>
      </div>
      <div className="body">
        <p>Card content goes here.</p>
      </div>
      <div className="footer">
        <button>Click me</button>
      </div>
    </div>
  );
};

In this monolithic example, all the card-related content is bundled together in a single component, making it less reusable and harder to maintain.

Step 2: Solution - Component Composition

Let's refactor the code using component composition. We'll create smaller components (Header, Body, and Footer) and compose them in the Card component.

import React from 'react';

// Header component
const Header = ({ title }) => (
  <div className="header">
    <h2>{title}</h2>
  </div>
);

// Body component
const Body = ({ content }) => (
  <div className="body">
    <p>{content}</p>
  </div>
);

// Footer component
const Footer = ({ buttonText }) => (
  <div className="footer">
    <button>{buttonText}</button>
  </div>
);

// Card component using component composition
const Card = ({ title, content, buttonText }) => (
  <div className="card">
    <Header title={title} />
    <Body content={content} />
    <Footer buttonText={buttonText} />
  </div>
);

Step-by-Step Explanation:

Create Smaller Components (Header, Body, Footer):

   const Header = ({ title }) => (
     <div className="header">
       <h2>{title}</h2>
     </div>
   );

   const Body = ({ content }) => (
     <div className="body">
       <p>{content}</p>
     </div>
   );

   const Footer = ({ buttonText }) => (
     <div className="footer">
       <button>{buttonText}</button>
     </div>
   );

Create smaller, reusable components for the header, body, and footer.

Compose Components in the Card Component:

   const Card = ({ title, content, buttonText }) => (
     <div className="card">
       <Header title={title} />
       <Body content={content} />
       <Footer buttonText={buttonText} />
     </div>
   );

Use these smaller components in the Card component, creating a composed structure.

Now, you can use the Card component throughout your application, and you also have the flexibility to reuse the Header, Body, and Footer components independently. Component composition promotes reusability, modularity, and easier maintenance of your code.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Hooks Pattern in react

Vivek Kurmi — Sat, 18 Nov 2023 17:13:01 +0000

Let's create a hook for making API calls in React. This will help encapsulate the logic related to fetching data from an API, making it reusable across different components.

Problem: Repeated API Call Logic

Suppose you have multiple components in your React application that need to make API calls. Repeating the same logic for making API calls in each component can lead to code duplication and reduced maintainability.

Step 1: Problem Code

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

const ComponentWithApiCall = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return <p>Data: {data}</p>;
};

Solution: Creating a Custom Hook for API Calls

Let's create a custom hook called useApiCall to handle the API call logic. This will make it easy to reuse this logic across different components.

Step 2: Solution Code

import { useState, useEffect } from 'react';

// Custom hook for making API calls
const useApiCall = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]); // Dependency array ensures that the effect runs when 'url' changes

  return { data, loading, error };
};

// Using the custom hook in a component
const ComponentWithApiCall = () => {
  const { data, loading, error } = useApiCall('https://api.example.com/data');

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return <p>Data: {data}</p>;
};

Step-by-Step Explanation:

Create the Custom Hook (useApiCall):

   const useApiCall = (url) => {
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);

     useEffect(() => {
       const fetchData = async () => {
         try {
           const response = await fetch(url);
           const result = await response.json();
           setData(result);
         } catch (error) {
           setError(error);
         } finally {
           setLoading(false);
         }
       };

       fetchData();
     }, [url]);

     return { data, loading, error };
   };

The useApiCall custom hook encapsulates the logic for making API calls. It returns an object containing the data, loading state, and error state.

Use the Custom Hook in the Component:

   const { data, loading, error } = useApiCall('https://api.example.com/data');

Use the custom hook in the component by providing the API URL. The hook returns the necessary states for handling the API call.

By creating a custom hook for API calls, we've modularized and abstracted away the logic related to fetching data. This makes it easy to reuse the logic in different components, enhancing code maintainability and reusability.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Redux - The Global State Pattern - Step by Step

Vivek Kurmi — Sat, 18 Nov 2023 17:02:33 +0000

Redux also solves the similar problem of Prop drilling that we discussed in previous post.

Let's break down the code step by step guide to use redux:

Step 1: Install Redux

npm install redux react-redux

This command installs the necessary packages for using Redux and integrating it with React.

Step 2: Create Redux Actions and Reducer

actions.js

// actions.js
export const increment = () => ({ type: 'INCREMENT' });

In actions.js, we define an action creator function increment that returns an action object with the type 'INCREMENT'. Actions are payloads of information that send data from your application to your Redux store.

reducer.js

// reducer.js
const initialState = { count: 0 };

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

export default counterReducer;

In reducer.js, we create a Redux reducer function counterReducer. Reducers specify how the application's state changes in response to actions. Here, it handles the 'INCREMENT' action by incrementing the count property in the state.

Step 3: Create Redux Store

store.js

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

In store.js, we create the Redux store using createStore from Redux, passing in our counterReducer. The store is where the state of the application is kept.

Step 4: Wrap App with Redux Provider

index.js

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

In index.js, we use the Provider component from react-redux to wrap the top-level component (App). This makes the Redux store accessible to all components in the application.

Step 5: Connect Components to Redux Store

App.js

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './actions';
import Counter from './Counter';

const App = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <Counter count={count} increment={() => dispatch(increment())} />
    </div>
  );
};

export default App;

In App.js, we use the useSelector hook to get the count from the Redux store. The useDispatch hook provides the dispatch function, which is then used to dispatch the increment action when the Counter component calls the increment function.

Step 6: Updated Counter Component

Counter.js

// Counter.js
import React from 'react';

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

export default Counter;

In Counter.js, we have a simple functional component that receives count and increment as props. Clicking the "Increment" button triggers the increment function received from the App component, which dispatches the 'INCREMENT' action.

This complete example demonstrates the setup and usage of Redux in a React application, providing a centralized state management solution.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Context/Provider Pattern

Vivek Kurmi — Sat, 18 Nov 2023 16:54:59 +0000

The Provider Pattern is a technique in React that uses the Context API to efficiently share and manage global state or data across multiple components without the need for manual prop passing. It simplifies data sharing in deeply nested component structures.

Let's walk through the Provider Pattern in React with step-by-step explanation.

Problem:

Imagine you have a deeply nested component structure, and you need to pass some shared data (like user authentication state or theme) to a component deep down the hierarchy. Passing this data through props at each level can become cumbersome and this problem is called Prop Drilling.

Step 1: Problem Code - Prop Drilling:

// Top-level component
function App() {
  const user = { id: 1, name: 'John Doe', isAuthenticated: true };
  return <NavBar user={user} />;
}

// Intermediate component
function NavBar({ user }) {
  return <UserProfile user={user} />;
}

// Deeply nested component
function UserProfile({ user }) {
  // Access user data here
  return <div>{user.name}</div>;
}

As the application grows, adding more components in between would require passing the user prop through each level, even if those intermediate components don't use the user prop.

Step 2: Solution - Using Provider Pattern:

Let's introduce the Provider Pattern using React Context API to avoid prop drilling.

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

// Create a context
const UserContext = createContext();

// Provider component to wrap around App
function UserProvider({ children }) {
  const user = { id: 1, name: 'John Doe', isAuthenticated: true };

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
}

// Intermediate component - No need to pass user prop
function NavBar() {
  return <UserProfile />;
}

// Deeply nested component - Can access user data directly
function UserProfile() {
  const user = useContext(UserContext);
  return <div>{user.name}</div>;
}

// Wrap the top-level component with the provider
function App() {
  return (
    <UserProvider>
      <NavBar />
    </UserProvider>
  );
}

Step-by-Step Explanation:

Create a Context:
- const UserContext = createContext(); creates a context to share user data.
Provider Component:
- UserProvider component wraps the top-level component (App) and provides the user data through the context using UserContext.Provider.
Intermediate Component:
- NavBar component doesn't need to receive user as a prop. It can directly access user data using the useContext hook.
Deeply Nested Component:
- UserProfile component can access the user data directly using the useContext(UserContext) hook.
Wrap Top-Level Component:
- Finally, wrap the top-level component (App) with UserProvider to make the user data available throughout the component tree.

Using the Provider Pattern with React Context helps avoid prop drilling and makes it easier to share global state or data across multiple components. It's especially useful for scenarios where many components need access to the same data.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Dependency Inversion Principle (DIP)

Vivek Kurmi — Sat, 04 Nov 2023 16:58:37 +0000

In the Dependency Inversion Principle (DIP), the key idea is to let something else create objects for you, and you use those objects without having to create them directly. You "invert" the control of object creation.

Imagine it like this: Instead of going to the store to buy groceries (creating objects directly), you order groceries online (letting someone else create and deliver them) and use them as needed.

In the same way, DIP encourages you to let a framework or other class create objects and inject (provide) them where you need them in your code. This makes your code more flexible and easier to change because you're not responsible for creating and managing everything yourself.

Let's explain DIP to a novice with an example where dependencies are injected manually via a configuration class:

Example (Dependency Injection with Manual Configuration):

Imagine you are building a simple notification system, and you want to send notifications via different channels such as email and SMS. Traditionally, you might create classes that directly use specific notification channels.

Violation of DIP (Without Dependency Injection):

class EmailNotification {
    public void sendEmail(String to, String message) {
        // Code to send an email
    }
}

class SMSNotification {
    public void sendSMS(String to, String message) {
        // Code to send an SMS
    }
}

In this code, the EmailNotification and SMSNotification classes directly depend on specific notification channels, violating DIP because they tightly couple to low-level modules.

Now, let's adhere to DIP using manual dependency injection through a configuration class:

Adhering to DIP (With Dependency Injection via Configuration):

interface NotificationService {
    void sendNotification(String to, String message);
}

class EmailNotification implements NotificationService {
    public void sendNotification(String to, String message) {
        // Code to send an email
    }
}

class SMSNotification implements NotificationService {
    public void sendNotification(String to, String message) {
        // Code to send an SMS
    }
}

class NotificationApp {
    private NotificationService notificationService;

    public NotificationApp(NotificationService notificationService) {
        this.notificationService = notificationService;
    }

    public void sendNotification(String to, String message) {
        notificationService.sendNotification(to, message);
    }
}

In this adhering-to-DIP example:

We define an interface NotificationService that defines the common behavior for sending notifications.
The EmailNotification and SMSNotification classes implement this interface, specifying how they send notifications.
The NotificationApp class depends on the NotificationService interface and can work with any class that implements this interface.

Configuration Class (Manual Dependency Injection):

Now, let's manually configure the dependencies using a configuration class:

public class AppConfig {
    public NotificationService emailNotificationService() {
        return new EmailNotification();
    }

    public NotificationService smsNotificationService() {
        return new SMSNotification();
    }

    public NotificationApp notificationApp() {
        return new NotificationApp(emailNotificationService());
    }
}

In this AppConfig class:

We define two methods, emailNotificationService and smsNotificationService, which create instances of EmailNotification and SMSNotification.
We also define a method notificationApp that creates an instance of NotificationApp and injects the emailNotificationService into it.

This manual configuration allows us to inject dependencies into the NotificationApp class without changing its code. We can switch notification services by modifying the AppConfig class while adhering to the Dependency Inversion Principle.

Benefits of Manual Dependency Injection:

The NotificationApp class is no longer tightly coupled to specific notification channels, making it more flexible and maintainable.
We can easily switch between different notification services by modifying the configuration class, promoting adherence to DIP.

In summary, the Dependency Inversion Principle suggests that high-level modules should not depend on low-level modules. Instead, they should both depend on abstractions. Manual dependency injection, as shown in this example, helps achieve this separation of concerns and promotes flexibility in your code.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Interface Segregation Principle (ISP)

Vivek Kurmi — Sat, 04 Nov 2023 16:57:49 +0000

The Interface Segregation Principle (ISP) suggests that you should not force a class to implement interfaces it does not use. In other words, your interfaces should be specific to the needs of the classes that implement them.

Let's explain ISP with a simple code example:

Step 1: Initial Design (Violating ISP)

Imagine you're designing a set of devices that can print and scan documents, but not all devices can do both. You might create a single interface for all devices:

interface MultiFunctionDevice {
    void print();
    void scan();
}

Now, let's create two classes for devices:

class AllInOnePrinter implements MultiFunctionDevice {
    public void print() {
        // Implement print functionality
    }

    public void scan() {
        // Implement scan functionality
    }
}

class Scanner implements MultiFunctionDevice {
    public void print() {
        // This device cannot print, so this method is empty
    }

    public void scan() {
        // Implement scan functionality
    }
}

Step 2: Identify the Problem (Violation of ISP)

The problem here is that the Scanner class is forced to implement a print method even though it cannot print. This violates the Interface Segregation Principle because it's making the Scanner class implement something it doesn't need or use.

Step 3: Apply the Interface Segregation Principle (Solution)

To adhere to ISP, you should create separate interfaces that are specific to each device's capabilities.

Step 4: Refined Design (Adhering to ISP)

Let's create separate interfaces for printing and scanning:

interface Printer {
    void print();
}

interface Scanner {
    void scan();
}

Now, we can implement these interfaces in our device classes without forcing them to implement methods they don't use:

class AllInOnePrinter implements Printer, Scanner {
    public void print() {
        // Implement print functionality
    }

    public void scan() {
        // Implement scan functionality
    }
}

class SimpleScanner implements Scanner {
    public void scan() {
        // Implement scan functionality
    }
}

Step 5: Benefits of the Solution (Adhering to ISP)

By adhering to the Interface Segregation Principle:

Classes only implement the methods that are relevant to their functionality, avoiding unnecessary code.
Code becomes more maintainable and less error-prone because you don't have to provide empty or meaningless method implementations.
It's easier to understand the roles and capabilities of different classes in your code.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile

Liskov Substitution Principle (LSP)

Vivek Kurmi — Sat, 28 Oct 2023 04:32:39 +0000

Let's break down the explanation of the Liskov Substitution Principle (LSP) into step-by-step actions with a Java code example.

Step 1: Create a Base Class and Derived Class (Initial Design):

Start with a base class and a derived class:

class Bird {
    public void fly() {
        System.out.println("Flying...");
    }
}

class Penguin extends Bird {
    public void fly() {
        System.out.println("Oops! I can't fly.");
    }
}

In this initial design, we have a base class Bird, and a derived class Penguin, which is meant to represent a bird that cannot fly. However, the problem with this design is not immediately obvious, and it appears to follow the Liskov Substitution Principle (LSP).

Step 2: Identify the Problem:

The problem becomes apparent when we consider that a Penguin is a bird that should not be able to fly, but in the derived class, we have overridden the fly() method. This violates the Liskov Substitution Principle because it doesn't adhere to the expected behavior of the base class.

Step 3: Apply the Liskov Substitution Principle (Solution):

To adhere to the Liskov Substitution Principle, we need to change our design to make it more consistent.

Step 4: Redefine the Classes to Follow LSP (Solution):

We should create a class hierarchy that accurately represents the behavior of birds, especially birds like penguins that cannot fly:

class Bird {
    public void fly() {
        System.out.println("Flying...");
    }
}

class Penguin extends Bird {
    public void swim() {
        System.out.println("Swimming...");
    }
}

In this corrected design, the Penguin class doesn't override the fly() method, which accurately represents that penguins cannot fly. Instead, it introduces a new method, swim(), to represent their ability to swim.

Step 5: Benefits of the Solution:

By adhering to the Liskov Substitution Principle in the corrected design, we've ensured that the derived class (Penguin) follows the expected behavior of the base class (Bird). This makes the code more consistent, predictable, and adheres to the principles of object-oriented design.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile