A collection of tech essays and notes.
ESSAY

Tiny React Apps

15 August 2024
This is a collection of tiny apps built with React, designed to explore and learn React along with its associated libraries. Each project serves as a hands-on experiment to try out new features and deepen understanding of the React ecosystem.
ESSAY

Understanding useCallback

5 June 2024
I hope you know what is useMemo and understood that it caches the values between re-renders. `useCallback` is similar to this and it caches a function instead of values...
ESSAY

React Notebook

2 June 2024
An online handbook about React that will cover all the basic topics. Unlike a physical handbook, this online book will evolve over time as I continue to learn and grow.
ESSAY

Understanding useMemo

1 June 2024
React ensures your user interface stays in sync with the application state by using a technique called re-rendering. During re-renders, React compares the Virtual DOMs and updates the necessary parts of the UI. This process is known as React Reconciliation...
ESSAY

Notes about Redux

20 May 2024
Redux is a JavaScript library that can be used with various JavaScript frameworks, including React, Angular, Vue, and Vanilla JS. It serves as a state management tool for handling cross-component or app-wide state.
notes

Types of states

19 May 2024

Below are the different types of states that can exist within an application. There are three main types:

1. Local State

Local state pertains to a single component. An example of this would be listening to user input in a field or toggling a “show more details” button. Typically, local state is managed within the component using useState or useReducer.

2. Cross-Component State

Cross-component state impacts multiple components. For instance, managing the open/closed state of a modal overlay. While this can also be managed using useState or useReducer, it often involves passing state between components via props drilling.

3. App-Wide State

App-wide state influences the entire application, such as themes or user authentication status. Similar to cross-component state, this can be managed using useState or useReducer, albeit with the assistance of props drilling.

ESSAY

How to deploy React app in Firebase

6 May 2024
A React Single Page Application (SPA) is essentially a static website and can be easily hosted using platforms like Firebase or Netlify.
notes

Handling errors in LISTAGG

3 May 2024

The LISTAGG analytic function, introduced in Oracle 11g Release 2, greatly simplifies string aggregations within SQL queries.

SELECT pid, LISTAGG(ColumnName, ' ' ) WITHIN GROUP (ORDER BY seq) AS ColumnName
FROM B GROUP BY pid;

However, if the output of the above query exceeds 4000 characters, it triggers an error, specifically ORA-01489, indicating that the result of string concatenation is too long.

To address this limitation, Oracle Database Release 2 (12.2) enhanced LISTAGG with the ability to handle overflow errors gracefully, as demonstrated below:

SELECT pid, LISTAGG(ColumnName, ' ' ON OVERFLOW TRUNCATE ) WITHIN GROUP (ORDER BY seq) AS ColumnName
FROM B GROUP BY pid;

In this updated syntax, the output is restricted to 4000 characters, preventing the ORA-01489 error from being raised.

The ON OVERFLOW clause offers several options to manage overflow situations:

  • ON OVERFLOW ERROR: This is the default behavior, triggering an error if the result overflows.
  • ON OVERFLOW TRUNCATE 'StringYouLike': Appends ‘StringYouLike(Count)’ at the end of the truncated string.
  • ON OVERFLOW TRUNCATE '': Displays the first 4000 characters without any additional terminating string.
  • ON OVERFLOW TRUNCATE WITH COUNT: Appends the total character count at the end, for example, ‘…(5512)’.
References

Stack Overflow.

ESSAY

Understanding React custom Hooks

2 April 2024
In React there are several built-in Hooks like `useState`, `useEffect`, and `useContext`. Sometime you need to create your own Hooks for specific purpose like checking user session, fetching data, or showing notifications...