System Design, Development, Deploy and Infra

Next.js builds upon React and offers several advantages over using React alone: Key Advantages of Next.js over React: Server-Side Rendering (SSR) and Static Site Generation (SSG): Next.js provides built-in support for SSR and SSG, leading to faster initial page loads, improved SEO, and better performance for content-heavy applications. Simplified Routing: Next.js offers a file-based routing system, making it easier to manage routing configurations compared to React, where you might need to use additional libraries like React Router. Automatic Code Splitting: Next.js automatically splits your JavaScript code into smaller chunks, optimizing page load times by loading only the necessary code for each page. API Routes: Next.js allows you to easily create serverless API endpoints within your Next.js project, simplifying backend integration. Image Optimization: Next.js includes an optimized image component that automat...

  What are side effects in React? In React, side effects are operations that interact with external systems or cause changes outside the component's rendering process. These can include: Data fetching: Retrieving data from APIs or other sources. Subscriptions: Setting up listeners for events or data changes. Timers: Creating timers for delayed actions or animations. DOM manipulation: Directly modifying the DOM (rarely used in modern React with declarative approach). Why use useEffect ? In class-based components, you would typically use lifecycle methods like componentDidMount , componentDidUpdate , and componentWillUnmount to handle side effects. Functional components don't have these methods directly. The useEffect Hook provides a way to manage side effects in functional components. It allows you to run a function after a component renders (or re-renders) and optionally clean up any resources created by that function before the component unmounts. How does useEffect wor...