How To Dev

A page aggregator designed for easy reference and search, compiling all blog posts for convenient access.

Introduction In this article, we're diving into Immutable and Mutable in JavaScript, while also exploring how functions like Object.freeze() and Object.seal() relate to Immutable . This is a pretty important topic that can be super helpful in projects with complex codebase. So, what's Immutable? Immutable is like a property of data in JavaScript. It means once the data is created, it can't be changed. This allows for better memory management and catching changes promptly. This is a big deal and totally contrasts with Mutable, which is the default nature when you initialize data in JavaScript. Implementing Immutable in a project makes development much smoother, reduces issues that crop up, and saves a ton of effort and time for maintenance down the road. But what happens if you don't use Immutable? Let me give you an example of how changing data during development can lead to some serious issues. let info = { name: "name" , address: "addres...

Introduction As most of us already know, React enables us to break down interfaces into independent parts called Components, facilitating reuse and customization. Currently, React Components are divided into two main types: Client Components : widely used in Client Side Rendering (CSR) applications. Server Components : a new type of component that renders on the server side before being sent to the client (browser). At first glance, it may seem similar to Server Side Rendering (SSR) which has been used for a while, but in reality, these two concepts have certain differences. The Difference of RSC (React Server Component) Ease of development: React Server Component allows easy direct connection to server-side resources such as databases or internal services, streamlining development processes. Improved performance: By reducing latency in communication between client and server, React Server Component enhances overall application performance. Reduced source code size: Libraries utili...

Introduction When it comes to styling your React application with a css-in-js approach, styled-components stands out as a top choice. In this post, I'll walk you through how to utilize styled-components in a Next application. By default, Next provides a way to use  css-in-js  through styled-jsx. However, if you find styled-jsx cumbersome because it requires writing CSS within JSX , which can make your components lengthier, then styled-components might be the right fit for you. Installation of styled-components npm install styled-components // or yarn add styled-components Example usage: import styled from 'styled-components' const Wrapper = styled . div ` color: red; text-align: center; ` // Component with input param const Wrapper2 = styled . div <{ $color ?: string }> ` color: ${ props => props . $color } ; text-align: center; ` export default function Index () { return ( <> < Wrapper > Demo 1 </ Wrapper > ...

Introduction You might have heard or seen others mention the react-query library quite often. Why should we use react-query when we can use useEffect to fetch data from an API ? This article will answer that question. What is react-query? react-query is a set of hooks for fetching, caching, and updating asynchronous data in React . Simply put, react-query is a library for fetching , caching , and updating asynchronous data when used in React . Why should we use react-query? Normally, there are many ways to fetch data from a server. Some popular methods include using useEffect and useState , or using a state management library like redux . export const Page = () => { const [ data , setData ] = useState (); useEffect (() => { const loadData = async () => { const response = await fetch ( hostAPI ). then ( response => response . json ()); setData ( response ) } loadData () }) return < DisplayData /> } This me...

Introduction In JavaScript, when we import a file, the process usually happens synchronously, known as static import. However, as our applications grow, this synchronous loading can lead to slower initial page loads due to larger JavaScript bundles. Moreover, there are times when imports are necessary only under specific circumstances, leading to unnecessary loading times for users who might not even utilize those features. Details Instead of burdening all users with unnecessary imports, dynamic imports come to the rescue. They allow us to load modules or files only when they are needed, thus improving performance and user experience. Dynamic imports are invoked using the import() function and return a promise. When using default exports, the exported data can be accessed through the default field, while other data can be accessed through fields with matching names. Here's how you can use dynamic imports: import ( "ramda" ). then ( module => { const moduleDefaul...