Server Side Rendering & Static Site Generation

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....

July 7, 2022 · 3 min · Cao Trong Tin

How to update nested state correctly in React Hook

Table of Contents Shallow Copy Deep Copy Problem Solution Wrap Up Shallow Copy Shallow Copy is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you may also cause the other object to change too — and so, you may end up unintentionally causing changes to the source or copy that you don’t expect....

January 4, 2022 · 3 min · Cao Trong Tin

React Fiber

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....

December 7, 2021 · 3 min · Cao Trong Tin

Async and defer in Javascript loading

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....

September 4, 2021 · 2 min · Cao Trong Tin

Pure Function in Javascript

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....

July 4, 2021 · 2 min · Cao Trong Tin

Understanding Date in Javascript

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....

February 3, 2021 · 1 min · Cao Trong Tin