Monolith Architecture

A traditional software architecture pattern where an entire application is built as a single, unified unit. All components (like the user interface, business logic, and data access layers) are tightly coupled and run as a single service. While simpler to develop and deploy, monoliths can become difficult to maintain and scale as the application grows, because changes to one part of the system can affect the entire application.

Microservice Architecture

An architectural style where an application is composed of small, independent services that communicate over a network. Each microservice handles a specific business function and can be developed, deployed, and scaled independently. This approach offers greater flexibility, scalability, and fault isolation, but also introduces complexity in terms of communication, data consistency, and deployment.

useEffect Hook

A React hook that allows you to perform side effects in functional components. Side effects can include data fetching, setting up subscriptions, or manually changing the DOM. The useEffect hook runs after the render and can be configured to run on every render, only on specific state or prop changes, or only once when the component mounts.

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

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

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []); // Empty array means this effect runs only once on mount

  return <div>{data ? data : "Loading..."}</div>;
}

When Does useEffect Get Called? (What About the Dependency Array?)

The useEffect hook is called after the component renders. By default, it runs after every render, but you can control its behavior using the dependency array. The second argument to useEffect is an array of dependencies. The effect only runs when one of the dependencies changes.

  • No Dependency Array: useEffect runs after every render.
  • Empty Dependency Array []: useEffect runs only once, after the initial render.
  • Array with Dependencies [dependency1, dependency2]: useEffect runs only when one of the listed dependencies changes.
useEffect(() => {
  // Code to run on render or dependency change
}, [dependency1, dependency2]);

Rendering and State Changes

When a component’s state changes, React triggers a re-render of that component. The re-render involves React calling the component’s render method to produce a new virtual DOM representation. React then compares this new virtual DOM with the previous one (using its reconciliation algorithm) to determine the minimal set of changes needed to update the actual DOM.

  • Does the Whole Component Re-Render?
    • Yes!: When state changes, the entire component re-renders, but React only updates the parts of the actual DOM that have changed. React’s virtual DOM diffing algorithm ensures that only the elements that need to be updated are changed, which improves performance.
    • When you type “chat” into an input field, React re-renders the component for each keystroke. However, the re-render is efficient, and React only updates the DOM where necessary (i.e., the input field’s value).

Why Does React Re-Render the Component When State Changes?

When a component’s state or props change, React re-executes the component function (for functional components) or re-renders the class component’s render method. React doesn’t necessarily re-render every child component. If the child components don’t receive new props or their internal state hasn’t changed, React will avoid re-rendering them unless explicitly required.

In the example of typing “chat” into an input, React re-renders the component 4 times, once for each character typed. Each re-render creates a new virtual DOM representation, but React only updates the actual DOM where the text has changed, minimizing the performance impact.