javascript

There are two types of pre-rendering in Next.js. So what are they and which is the best approach? Table of Contents Rendering on Server Pre-rendering Server Side Rendering Static Site Generation Use cases Wrap Up Rendering on Server ✍️ Explain: When users request to server, server will sent a generated HTML file. After that, ReactDOM.hydrate() will run to hydrate (attach event listeners) the HTML rendered from the server. After hydration process, the website becomes interactive....

Table of Contents Prerequisites Reconciliation Reconciliation vs Rendering Scheduling React Fiber React Fiber is an ongoing reimplementation of React’s core algorithm. It is the culmination of over two years of research by the React team. Prerequisites A few things to know before diving into React Fiber: React Components, Elements, Instances Reconciliation React Basic Theoretical Concepts React design Principles Reconciliation Reconciliation is an algorithm that React uses to distinguish one DOM tree from another to determine which parts need to be changed....

Table of Contents What is Intersection Observer API Some features Usage Example In the past, it’s difficult to determine a element is visible in the viewport or not, or how long the user was reading this content. Intersection Observer API offers some features that help users to improve user exprerience and speed up the website. ❔ What is Intersection Observer API? Intersection Observer API offers a way to asynchronously observe changes in UI with ancestor elements or high-level document’s viewports....

Table of Contents Memory Leak Solve the problem Some memory leak cases in React In conclusion Memory Leak Memory leak is a type of resource leak that occurs when a computer program incorrectly manages memory allocations. Sometimes, we get a warning about memory leak in our React applications such as Can’t perform a React state update on an unmounted component. We shouldn’t update state in an unmounted component. For example, we are fetching data at the first mouting to update component states, but we immediately navigate to another page or take other actions to make the component unmounted so state updating becomes unuseful....

Table of Contents How HTML displayed on browser Script Tag Async attribute Defer attribute Difference beetween Async and Defer Use cases How HTML displayed on browser First, browser will download resources and parse HTML to display. HTML is parsed as soon as resources are loaded Script Tag To load a javascript file, we use script tag <script src="/path/to/script.js"></script> 👇️Below is loading process: ✍️ Explain: First, HTML code will be parsed until reach script tag, script will be downloaded....

Table of Contents Functions Pure Functions Side Effects Example Why is it important? Let’s explore what pure function is 👇 Functions? Function is a execution of a task. It receives input and returns a value. Pure Functions What is a pure function? A function always returns same output if it is passed constant parameters. It doesn’t depends on any state or data, it just depend on its input parameters. This function does not have any effect on other objects, such as requests, input, output or data mutations....

Table of Contents Timezones ISO 8061 format Date Constructions Hi there 👋, i see that many developers are facing with problems about Date in javascript recently. Today, I gonna to show you how to use Date in js correctly. Timezones There are 2 definitions about timezones in js: UTC and Local time zones Local time refers to the timezone your computer is in. UTC is synonymous with Greenwich Mean Time (GMT) in practice....