DEV Community: Muhammad Muneeb Ur Rehman

Demystifying Custom Hooks in React: What, When, and How

Muhammad Muneeb Ur Rehman — Wed, 20 Aug 2025 12:47:20 +0000

React hooks have completely changed the way we write components. They allow us to handle state, side effects, and context in a cleaner, more functional way. But sometimes, we find ourselves writing the same hook logic again and again. That’s where custom hooks come to the rescue.

In this article, we’ll explore:

What custom hooks are
When to use them
How to create and use them with real-world examples

What are Custom Hooks?

A custom hook is simply a JavaScript function whose name starts with use and that can use other hooks inside it (useState, useEffect, useContext, etc.).

They allow us to:

Extract reusable logic from components
Keep your components clean and focused
Share logic between different components without duplicating code

Think of them as small utilities that encapsulate hook-related logic and can be plugged into any component.

When to Use Custom Hooks

You should consider creating a custom hook when:

Reusing logic:

If multiple components need the same piece of logic (e.g., fetching data, handling form inputs).

Improving readability:

Components should mainly focus on UI, not business logic. Moving logic to hooks makes code more readable.

Separation of concerns

Keeps logic modular and testable, just like splitting functions in regular JavaScript.

How to Create a Custom Hook

Let’s start with a real-world scenario: fetching data from an API.
Normally, we’d write the fetching logic inside a component with useEffect. But if multiple components need to fetch data, we’ll end up repeating the same code.

Example 1: A Custom Hook for Fetching Data

import { useState, useEffect } from "react";

// Custom Hook
export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true;

    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error("Failed to fetch");
        const result = await response.json();
        if (isMounted) {
          setData(result);
          setError(null);
        }
      } catch (err) {
        if (isMounted) setError(err.message);
      } finally {
        if (isMounted) setLoading(false);
      }
    }

    fetchData();

    return () => { isMounted = false; };
  }, [url]);

  return { data, loading, error };
}

Using it in a Component

function UsersList() {
  const { data: users, loading, error } = useFetch("https://jsonplaceholder.typicode.com/users");

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Now, whenever we need to fetch data in another component, we just call useFetch(url) instead of rewriting the same code.

Example 2: A Custom Hook for Form Handling

Forms are everywhere, and handling form state can get repetitive. Let’s create a reusable hook to manage form inputs.

import { useState } from "react";

export function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const resetForm = () => setValues(initialValues);

  return { values, handleChange, resetForm };
}

Using it in a Login Form

function LoginForm() {
  const { values, handleChange, resetForm } = useForm({ email: "", password: "" });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitted:", values);
    resetForm();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

Any new form (signup, profile update, contact form) can now reuse this same useForm hook.

Key Takeaways

Custom hooks let you encapsulate logic and reuse it across components.
They make your code cleaner, modular, and easier to maintain.
Use them for tasks like:
- Fetching data
- Form handling
- Authentication checks
- Managing browser events (scroll, resize, etc.)

Ending Notes

Custom hooks are not some advanced React trick they’re just functions. But when used wisely, they can dramatically improve your code quality and development speed.

Next time you find yourself copy-pasting hook logic, stop and think:
“Can I move this into a custom hook?”

Chances are, the answer is yes and your future self will thank you.

Understanding React's useContext Hook: A Complete Guide

Muhammad Muneeb Ur Rehman — Sun, 03 Aug 2025 14:26:03 +0000

The useContext hook in React is a powerful way to share state between components without manually passing props through every level of the component tree. It makes your code cleaner, more maintainable, and is a key part of building scalable React applications.

In this article, we will explore:

What useContext is
How it works under the hood
Realistic code examples
Best practices and pitfalls
A visual diagram to understand its flow

1. What is useContext?

In React, data is typically passed from parent to child via props. But when your app grows, passing props through multiple levels (also known as prop drilling) becomes cumbersome.

useContext allows you to:

Create a Context (a shared data store)
Provide that context to a part of your component tree
Access that data directly from any nested component without manually passing props

Think of it as a global state for a section of your component tree.

2. How useContext Works

Create a Context using React.createContext().
Wrap your components with a Provider that supplies the data.
Consume the context in any child component using useContext.

Here’s a simple example:

import React, { createContext, useContext, useState } from 'react';

// 1. Create Context
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    // 2. Provide Context
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  // 3. Consume Context
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button
      style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
    >
      Current Theme: {theme}
    </button>
  );
}

What happens here?

The App component provides a theme value to all nested components.

ThemedButton can access themeand setTheme directly, without prop drilling.

3. Interactive Example

Imagine you have multiple buttons across different components that need to know the current theme. Without context, you would pass the theme through every component, even if they don’t use it.

With useContext:

The state is centralized.
Any component in the tree can read and update the theme instantly.

4. Best Practices

Use Context for Global State that Changes Infrequently
Themes, authenticated user info, language settings
Avoid Overusing Context
For high-frequency updates (like mouse positions), context can trigger unnecessary re-renders
Combine with useReducer for Complex State
Create a Context + Reducer for global state management like Redux-lite

5. Visual Diagram of useContext Flow

Below is a visual representation of how useContext works:

Context Provider wraps the components.
Context Consumers (via useContext) read the data directly.
Updates in the provider immediately propagate to all consumers.

[ Context Provider ]
        |
        | provides value
        v
+-------------------+
|  Child Component  |
|   useContext()    |
+-------------------+
        |
        | accesses context
        v
   No Prop Drilling!

With useContext, your React applications become cleaner, more maintainable, and easier to scale. Combine it with hooks like useReducer for a lightweight global state management solution.

Building a Highly Scalable Ride-Sharing System Architecture

Muhammad Muneeb Ur Rehman — Sun, 03 Aug 2025 14:01:40 +0000

Building a ride-sharing platform that can handle millions of users in real-time requires thoughtful system design, distributed computing expertise, and robust cloud infrastructure. Below is a comprehensive guide on how to architect a scalable system for ride-hailing applications like Uber or Lyft.

1. Overview of System Requirements

Ride-sharing systems must:

Handle millions of concurrent rider and driver requests
Provide real-time geolocation updates
Ensure high availability and low latency
Scale seamlessly across regions
Integrate with multiple external services (maps, payments, notifications)

To meet these demands, the system is typically designed as a set of distributed microservices communicating asynchronously.

2. Core Architecture Components

1. Client Applications

Rider App (iOS/Android): Requests rides, tracks driver locations, receives trip and payment updates.

Driver App (iOS/Android): Receives ride requests, updates location in real-time, handles navigation.

2. API Gateway & Load Balancer

Entry point for all requests.
Handles routing, authentication, and rate-limiting.
Distributes load across microservices for fault tolerance.

3. Core Microservices

User Service – Manages rider and driver profiles, sessions, and authentication.
Ride Matching Service – Matches riders with nearby drivers using real-time geolocation.
Geolocation Service – Continuously tracks positions using high-speed, in-memory databases like Redis.
Pricing & Surge Service – Dynamically calculates fares and surge pricing.
Trip Service – Manages the ride lifecycle (requested → accepted → completed).
Payment & Billing Service – Handles ride payments, refunds, and payouts.
Notification Service – Sends push notifications and in-app updates in real-time.

4. Event Bus / Message Queue

Kafka, Pulsar, or AWS SQS for event-driven communication.
Decouples microservices and allows horizontal scaling.
Key events: ride_requested, driver_location_updated, trip_completed.

5. Databases and Storage

Operational Databases:

PostgreSQL/MySQL for user profiles.
MongoDB/Cassandra for trip data with high write throughput.

Cache Layer:

Redis / Memcached for fast lookups of active trips and driver availability.

Analytics & Data Warehouse:

BigQuery or Snowflake for analytics, reporting, and ML pipelines.

6. External Integrations

Maps & Routing APIs (Google Maps, Mapbox)
Payment Gateways (Stripe, PayPal, Adyen)
Push Notifications (Firebase, OneSignal)

7. Monitoring & Observability

Centralized Logging: ELK Stack or Datadog
Metrics & Tracing: Prometheus, Grafana, OpenTelemetry
Kubernetes auto-scaling and health checks

3. High-Level Data Flow

Ride Request: Rider sends a ride request → API Gateway → Ride Matching Service.
Driver Matching: Ride Matching queries Geolocation Service for nearby drivers.
Fare Calculation: Pricing Service determines the dynamic fare.
Driver Notification: Closest driver is notified via Notification Service.
Trip Lifecycle: Driver accepts → Trip Service updates trip status → Event Bus streams updates.
Real-Time Updates: Geolocation Service tracks driver movements and provides ETA updates.
Payment & Completion: Payment Service charges rider and schedules driver payout.
Analytics & ML: All events are logged to the Event Bus and Data Warehouse for insights.

4. Example Architecture Diagram

Text Representation

  [ Rider App ]         [ Driver App ]
              |                    |
              +--------API Gateway & LB--------+
                                |
   +------------+----------------+----------------+-------------+
   |            |                |                |             |
[User]    [Ride Matching]   [Trip Service]   [Payment]   [Notification]
   |            |                |                |             |
   |      [Geolocation] <--------+                |             |
   |            |                                 |             |
   +-----[Event Bus / Queue]----------------------+-------------+
                     |
        +------------------------------+
        |        Databases & Cache      |
        | (SQL, NoSQL, Redis, Data Lake)|
        +------------------------------+
                     |
              [Analytics & ML]

Visual Diagram

5. Key Design Principles for Scalability

Microservices and Decoupling – Isolate responsibilities to scale services independently.
Event-Driven Architecture – Use message queues for asynchronous, fault-tolerant workflows.
Caching and In-Memory Datastores – Reduce latency for hot data like driver locations.
Global Load Balancing – Ensure availability across regions and automatically failover.
Observability and Auto-Scaling – Continuous monitoring with Kubernetes scaling policies.

By following these principles and leveraging a modern cloud-native stack, your ride-sharing system can scale globally, handle sudden traffic spikes, and maintain a smooth, low-latency user experience.

Medical Disease Information Retrieval System: Code Documentation and Implementation Guide

Muhammad Muneeb Ur Rehman — Sat, 20 May 2023 19:44:56 +0000

The Medical Disease Information Retrieval System is a Python program designed to retrieve disease information based on user queries. This document serves as a comprehensive guide to understanding the code and implementing the system effectively. The system utilizes Natural Language Processing (NLP) techniques, such as text preprocessing and TF-IDF vectorization, to calculate the cosine similarity between user queries and a collection of disease-related documents.

Code Overview:
The code is divided into several sections, each responsible for a specific task. Let's explore each section in detail:

Importing Required Libraries:
The initial lines of code import the necessary libraries, including os for file handling, nltk for natural language processing, and sklearn for the TF-IDF vectorization.

import os
import nltk
from nltk.corpus import stopwords
from nltk.stem import SnowballStemmer
from sklearn.feature_extraction.text import TfidfVectorizer

# nltk.download('stopwords')

Preprocessing the Dataset:
The code reads text files from the 'Data Set' folder and preprocesses the documents. It removes stopwords, stems the words using the SnowballStemmer, and creates a preprocessed document corpus.

# set up stop words and stemmer
stop_words = set(stopwords.words('english'))
stemmer = SnowballStemmer('english')

# read all txt files from Data Set folder
folder_path = 'Data Set'
docs = []
for filename in os.listdir(folder_path):
    file_path = os.path.join(folder_path, filename)
    with open(file_path, 'r') as file:
        doc = file.read()
        docs.append(doc)

# pre-process the documents
preprocessed_docs = []
for doc in docs:
    preprocessed_doc = []
    for line in doc.split('\n'):
        if ':' in line:
            line = line.split(':')[1].strip()
        words = line.split()
        words = [word for word in words if word.lower() not in stop_words]
        words = [stemmer.stem(word) for word in words]
        preprocessed_doc.extend(words)
    preprocessed_doc = ' '.join(preprocessed_doc)
    preprocessed_docs.append(preprocessed_doc)

Generating the TF-IDF Matrix:
Using the preprocessed document corpus, the code employs the TfidfVectorizer from sklearn to generate a TF-IDF matrix. This matrix represents the importance of terms in each document.

# generate tf-idf matrix of the terms
vectorizer = TfidfVectorizer()
tfidf_matrix = vectorizer.fit_transform(preprocessed_docs)

User Query Processing:
The code prompts the user to enter a query and preprocesses it by removing stopwords and stemming the words. This processed query is then used to calculate the cosine similarity between the query and each document.

query = ''
while (query != 'quit'):
    # prompt the user to enter a query
    query = input('\nEnter your query: ')

    # pre-process the query
    preprocessed_query = []
    for word in query.split():
        if word.lower() not in stop_words:
            word = stemmer.stem(word)
            preprocessed_query.append(word)
    preprocessed_query = ' '.join(preprocessed_query)

    # calculate the cosine similarity between the query and each document
    cosine_similarities = tfidf_matrix.dot(
        vectorizer.transform([preprocessed_query]).T).toarray().flatten()

Retrieving Disease Information:
Based on the cosine similarity scores, the code identifies the most similar document and extracts disease-related information such as name, prevalence, risk factors, symptoms, treatments, and preventive measures.

    # find the index of the most similar document
    most_similar_doc_index = cosine_similarities.argsort()[::-1][0]

    # retrieve the disease information from the most similar document
    most_similar_doc = docs[most_similar_doc_index]
    disease_name = ''
    prevalence = ''
    risk_factors = ''
    symptoms = ''
    treatments = ''
    preventive_measures = ''

    for line in most_similar_doc.split('\n'):
        if line.startswith('Disease Name:'):
            disease_name = line.split(':')[1].strip()
        elif line.startswith('Prevalence:'):
            prevalence = line.split(':')[1].strip()
        elif line.startswith('Risk Factors:'):
            risk_factors = line.split(':')[1].strip()
        elif line.startswith('Symptoms:'):
            symptoms = line.split(':')[1].strip()
        elif line.startswith('Treatments:'):
            treatments = line.split(':')[1].strip()
        elif line.startswith('Preventive Measures:'):
            preventive_measures = line.split(':')[1].strip()

Displaying the Disease Information:
Finally, the code prints the retrieved disease information for the most similar document to the user.

    # print the disease information
    print(f"\nDisease Name: {disease_name}\n")
    print(f"Prevalence: {prevalence}\n")
    print(f"Risk Factors: {risk_factors}\n")
    print(f"Symptoms: {symptoms}\n")
    print(f"Treatments: {treatments}\n")
    print(f"Preventive Measures: {preventive_measures}\n\n")

Implementation and Usage:
To implement and use the Disease Information Retrieval System, follow these steps:

Data Preparation:

Create a Data Set folder and place text files containing disease information in this folder.
Ensure the text files follow a specific format, such as starting each section with specific labels like 'Disease Name:', 'Prevalence:', etc.

Install Required Libraries:

Install the required libraries by running pip install nltk scikit-learn.

Preprocessing and TF-IDF Matrix Generation:

Run the provided code, ensuring that the NLTK stopwords package is downloaded (uncomment the nltk.download('stopwords') line if necessary).
The code will preprocess the documents and generate the TF-IDF matrix.

User Query and Disease Information Retrieval:

Enter queries in the console when prompted.
The system will process the query, calculate cosine similarity, and retrieve the most relevant disease information.

The Disease Information Retrieval System is a powerful tool for retrieving disease-related information based on user queries. By leveraging NLP techniques and TF-IDF vectorization, the system can provide valuable insights into diseases, including their prevalence, risk factors, symptoms, treatments, and preventive measures. By following the implementation guide provided in this document, you can set up the system and retrieve disease information efficiently and accurately.

Note: It is essential to ensure the proper formatting and organization of disease-related documents in the 'Data Set' folder to achieve accurate results.

Complete Code:

import os
import nltk
from nltk.corpus import stopwords
from nltk.stem import SnowballStemmer
from sklearn.feature_extraction.text import TfidfVectorizer

# nltk.download('stopwords')

# set up stop words and stemmer
stop_words = set(stopwords.words('english'))
stemmer = SnowballStemmer('english')

# read all txt files from Data Set folder
folder_path = 'Data Set'
docs = []
for filename in os.listdir(folder_path):
    file_path = os.path.join(folder_path, filename)
    with open(file_path, 'r') as file:
        doc = file.read()
        docs.append(doc)

# pre-process the documents
preprocessed_docs = []
for doc in docs:
    preprocessed_doc = []
    for line in doc.split('\n'):
        if ':' in line:
            line = line.split(':')[1].strip()
        words = line.split()
        words = [word for word in words if word.lower() not in stop_words]
        words = [stemmer.stem(word) for word in words]
        preprocessed_doc.extend(words)
    preprocessed_doc = ' '.join(preprocessed_doc)
    preprocessed_docs.append(preprocessed_doc)

# generate tf-idf matrix of the terms
vectorizer = TfidfVectorizer()
tfidf_matrix = vectorizer.fit_transform(preprocessed_docs)

query = ''
while (query != 'quit'):
    # prompt the user to enter a query
    query = input('\nEnter your query: ')

    # pre-process the query
    preprocessed_query = []
    for word in query.split():
        if word.lower() not in stop_words:
            word = stemmer.stem(word)
            preprocessed_query.append(word)
    preprocessed_query = ' '.join(preprocessed_query)

    # calculate the cosine similarity between the query and each document
    cosine_similarities = tfidf_matrix.dot(
        vectorizer.transform([preprocessed_query]).T).toarray().flatten()

    # find the index of the most similar document
    most_similar_doc_index = cosine_similarities.argsort()[::-1][0]

    # retrieve the disease information from the most similar document
    most_similar_doc = docs[most_similar_doc_index]
    disease_name = ''
    prevalence = ''
    risk_factors = ''
    symptoms = ''
    treatments = ''
    preventive_measures = ''

    for line in most_similar_doc.split('\n'):
        if line.startswith('Disease Name:'):
            disease_name = line.split(':')[1].strip()
        elif line.startswith('Prevalence:'):
            prevalence = line.split(':')[1].strip()
        elif line.startswith('Risk Factors:'):
            risk_factors = line.split(':')[1].strip()
        elif line.startswith('Symptoms:'):
            symptoms = line.split(':')[1].strip()
        elif line.startswith('Treatments:'):
            treatments = line.split(':')[1].strip()
        elif line.startswith('Preventive Measures:'):
            preventive_measures = line.split(':')[1].strip()

    # print the disease information
    print(f"\nDisease Name: {disease_name}\n")
    print(f"Prevalence: {prevalence}\n")
    print(f"Risk Factors: {risk_factors}\n")
    print(f"Symptoms: {symptoms}\n")
    print(f"Treatments: {treatments}\n")
    print(f"Preventive Measures: {preventive_measures}\n\n")

Note: It is not a perfect system so it is not recommended to rely only on it or follow it blindly, yet it is a good solution to help out people which doctor they should consult or take precautions which can help them to avoid further loss in health. These precautions are not harmful thought.

For data set and more detailed GitHub Link: https://github.com/muneebkhan4/Medical-Disease-Information-Retrival-System

How to Query 1st, 2nd, or Nth Largest attribute in SQL Table

Muhammad Muneeb Ur Rehman — Sat, 20 May 2023 10:05:47 +0000

In SQL, selecting the first, second, or nth largest attribute from any table is a common requirement. In this article we will go through the steps to achieve this using SQL queries.
Let's do it with an example, assume we have an employee table and a department table, with the employee table containing salary information.

Prerequisites:
Before proceeding, make sure you have a working knowledge of SQL and have access to a database management system (DBMS) such as MySQL, PostgreSQL, or Oracle.

Step 1: Understand the Schema
To begin, let's assume we have two tables: employee and department. The employee table contains columns such as employee_id, name, salary, and department_id. The department table contains columns like department_id and department_name.

Step 2: Select 1st Largest Salary
To select the largest salary from the employee table, you can use the following SQL query:

SELECT MAX(salary) AS largest_salary FROM employee

This is pretty much simple query, and we get the largest salary easily.

Step 3: Select 2nd Largest Salary
To select the second-largest salary, you can modify the previous query by adding a condition:

SELECT MAX(salary) AS second_largest_salary FROM employee WHERE salary < ( SELECT MAX(salary) FROM employee )
This query uses a subquery to find the maximum salary and then selects the maximum salary that is less than the maximum salary found in the subquery.

Step 4: Select Nth Largest Salary
To select the Nth largest salary, you can generalize the previous approach by introducing a variable or parameter:

SET @n = 4; -- Specify the desired Nth largest value

SELECT MAX(salary) AS nth_largest_salary
FROM employee
WHERE salary < (
  SELECT MAX(salary)
  FROM employee
  WHERE salary < (
    SELECT MAX(salary)
    FROM employee
    WHERE salary < (
      SELECT MAX(salary)
      FROM employee
      WHERE salary < (
        -- Continue this pattern until N - 1 subqueries are added
        SELECT MAX(salary)
        FROM employee
      )
    )
  )
)

In this example, we use a variable @n to represent the desired Nth largest value. You can adjust this variable as needed.

Is it Horrible to query 8th largest salary?

Definitely, Not. We have OFFSET and FETCH.

Step 1: Select 2nd Largest Salary
To select the second-largest salary from the "employee" table in PostgreSQL, you can use the following SQL query:

SELECT salary FROM employee ORDER BY salary DESC OFFSET 1 FETCH FIRST 1 ROW ONLY;

This query orders the salaries in descending order and skips the first row (highest salary) using the OFFSET clause. Then, it fetches the first row only, giving us the second-largest salary.

Step 2: Select 3rd Largest Salary
To select the third-largest salary, you can modify the previous query by changing the OFFSET value:

SELECT salary FROM employee ORDER BY salary DESC OFFSET 2 FETCH FIRST 1 ROW ONLY;

Here, we set the OFFSET to 2, skipping the first two rows (two highest salaries), and fetching the first row, which corresponds to the third-largest salary.

Step 3: Select Nth Largest Salary
To select the Nth largest salary, you can generalize the previous approach by introducing a variable or parameter:

DECLARE @n INT = 4; -- Specify the desired Nth largest value

SELECT salary
FROM employee
ORDER BY salary DESC
OFFSET (@n - 1)
FETCH FIRST 1 ROW ONLY;

In this example, we introduce a variable @n to represent the desired Nth largest value. You can adjust this variable as needed.

Conclusion:
Using the OFFSET and FETCH clauses in PostgreSQL allows for an efficient and concise way to select the second, third, and Nth largest salaries from an employee table.

How React Preserve and Reset State

Muhammad Muneeb Ur Rehman — Fri, 19 May 2023 12:55:43 +0000

State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.

The UI tree
Browsers use many tree structures to model UI. The DOM represents HTML elements, the CSSOM does the same for CSS. There’s even an Accessibility tree!

React also uses tree structures to manage and model the UI you make. React makes UI trees from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)

Note: Open Image for Best View and Understanding.

From components, React creates a UI tree which React DOM uses to render the DOM

State is tied to a position in the tree
When you give a component state, you might think the state “lives” inside the component. But the state is actually held inside React. React associates each piece of state it’s holding with the correct component by where that component sits in the UI tree.

Let's see it with the help of an example. Assume, we have a <Counter /> JSX tag, but it’s rendered at two different positions:

import { useState } from 'react';

export default function App() {
  const counter = <Counter />;
  return (
    <div>
      {counter}
      {counter}
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Note: Open Image for Best View and Understanding.

These are two separate counters because each is rendered at its own position in the tree. You don’t usually have to think about these positions to use React, but it can be useful to understand how it works.

In React, each component on the screen has fully isolated state. For example, if you render two Counter components side by side, each of them will get its own, independent, score and hover states.

Try running the code and clicking both counters and notice they don’t affect each other:

import { useState } from 'react';

export default function App() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

As you can see, when one counter is updated, only the state for that component is updated:

Note: Open Image for Best View and Understanding.

React will keep the state around for as long as you render the same component at the same position. To see this, increment the counter, then remove it by unchecking “Render the counter” checkbox, and then add it back by ticking it again:

import { useState } from 'react';

export default function App() {
  const [showB, setShowB] = useState(true);
  return (
    <div>
      {showB && <Counter />} 
      <label>
        <input
          type="checkbox"
          checked={showB}
          onChange={e => {
            setShowB(e.target.checked)
          }}
        />
        Render the counter
      </label>
    </div>
  );
}

function Counter() {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

Note: Open Image for Best View and Understanding.

When you tick “Render the counter”, a new Counter and its state are initialized from scratch (score = 0) and added to the DOM.

Note: Open Image for Best View and Understanding.
React preserves a component’s state for as long as it’s being rendered at its position in the UI tree. If it gets removed, or a different component gets rendered at the same position, React discards its state.

Source: https://react.dev/learn/preserving-and-resetting-state

University Management System in Apache AGE - Part-3

Muhammad Muneeb Ur Rehman — Wed, 17 May 2023 11:24:20 +0000

Now we will see the relations (edges) in our University Management System with the help of some dummy data insertion and in the end, we will see how it will look like in Apache AGE Viewer.

Enrolled_In relation:
The students get enrolled in different courses. Here is an example with some dummy data where I have created five enrollment relations between students and courses.

Enrollment-1:
SELECT * FROM cypher('university', $$ MATCH (s:student), (c:course) WHERE s.name = 'std1' AND c.name = 'Database' CREATE (s)-[e:enrolled_in]->(c) RETURN e $$) as (e agtype);

Enrollment-2:
SELECT * FROM cypher('university', $$ MATCH (s:student), (c:course) WHERE s.name = 'std2' AND c.name = 'Database' CREATE (s)-[e:enrolled_in]->(c) RETURN e $$) as (e agtype);

Enrollment-3:
SELECT * FROM cypher('university', $$ MATCH (s:student), (c:course) WHERE s.name = 'std3' AND c.name = 'Programming' CREATE (s)-[e:enrolled_in]->(c) RETURN e $$) as (e agtype);

Enrollment-4:
SELECT * FROM cypher('university', $$ MATCH (s:student), (c:course) WHERE s.name = 'std4' AND c.name = 'Programming' CREATE (s)-[e:enrolled_in]->(c) RETURN e $$) as (e agtype);

Enrollment-5:
SELECT * FROM cypher('university', $$ MATCH (s:student), (c:course) WHERE s.name = 'std5' AND c.name = 'Programming' CREATE (s)-[e:enrolled_in]->(c) RETURN e $$) as (e agtype);

Taught_By Relation:
The courses are taught by different teachers. Here I have created two taught by relations between courses and teachers with dummy data:

Taught_By Relation-1:
SELECT * FROM cypher('university', $$ MATCH (c:course), (t:teacher) WHERE c.name = 'Programming' AND t.name = 'Muneeb' CREATE (c)-[e:taught_by]->(t) RETURN e $$) as (e agtype);

Taught_By Relation-2:
SELECT * FROM cypher('university', $$ MATCH (c:course), (t:teacher) WHERE c.name = 'Programming' AND t.name = 'Muneeb' CREATE (c)-[e:taught_by]->(t) RETURN e $$) as (e agtype);

Offered_By Relation:
The couses are offered by different departments. Here I have created two offered by relations between courses and department with dummy data:

Offered_By Relation-1:
SELECT * FROM cypher('university', $$ MATCH (c:course), (d:Department) WHERE c.name = 'Database' AND d.name = 'Computer Science' CREATE (c)-[e:offered_by]->(d) RETURN e $$) as (e agtype);

Offered_By Relation-2:
SELECT * FROM cypher('university', $$ MATCH (c:course), (d:Department) WHERE c.name = 'Programming' AND d.name = 'Computer Science' CREATE (c)-[e:offered_by]->(d) RETURN e $$) as (e agtype);

Affiliated_With Raltion-1:
Every teacher is affiliated with any Department. Here I have created two affiliated with relations between teachers and department with some dummy data:

Affiliated_With Relation-1:
SELECT * FROM cypher('university', $$ MATCH (t:teacher), (d:Department) WHERE t.name = 'Muneeb' AND d.name = 'Computer Science' CREATE (t)-[e:affiliated_with]->(d) RETURN e $$) as (e agtype);

Affliated_With Raltion-2:
SELECT * FROM cypher('university', $$ MATCH (t:teacher), (d:Department) WHERE t.name = 'Micheal' AND d.name = 'Computer Science' CREATE (t)-[e:affliated_with]->(d) RETURN e $$) as (e agtype);

For more details visit: https://age.apache.org/overview/

AGE Github Link: https://github.com/apache/age

AGE Viewer Github Link: https://github.com/apache/age-viewer

University Management System in Apache AGE - Part-2

Muhammad Muneeb Ur Rehman — Wed, 17 May 2023 09:16:20 +0000

Here is a sample database documentation that includes the necessary Nodes and their attributes:

Student
id: unique identifier for the student
name: name of the student
email: email address of the student

Teacher
id: unique identifier for the professor
name: name of the professor
email: email address of the professor

Course
id: unique identifier for the course
name: name of the course
credits: number of credits assigned to the course

Department
id: unique identifier for the department
name: name of the department

Let's now create some dummy data to see how our system will work.

Department
SELECT * FROM cypher('university', $$ create(:Department{name:'Computer Science', rooms:30}) $$) as (v agtype);

Student
SELECT * FROM cypher('university', $$ create(:student{name:'std1', rollNo:1}) $$) as (v agtype);

SELECT * FROM cypher('university', $$ create(:student{name:'std2', rollNo:2}) $$) as (v agtype);

SELECT * FROM cypher('university', $$ create(:student{name:'std3', rollNo:3}) $$) as (v agtype);

SELECT * FROM cypher('university', $$ create(:student{name:'std4', rollNo:4}) $$) as (v agtype);

SELECT * FROM cypher('university', $$ create(:student{name:'std5', rollNo:5}) $$) as (v agtype);

Teacher
SELECT * FROM cypher('university', $$ create(:teacher{name:'Micheal', role:'Assistant Prof'}) $$) as (v agtype);
SELECT * FROM cypher('university', $$ create(:teacher{name:'Muneeb', role:'Professor'}) $$) as (v agtype);

Course
SELECT * FROM cypher('university', $$ create(:course{name:'Programming', creditHours:3}) $$) as (v agtype);
SELECT * FROM cypher('university', $$ create(:course{name:'Database', creditHours:3}) $$) as (v agtype);

For more details visit: https://age.apache.org/overview/

AGE Github Link: https://github.com/apache/age

AGE Viewer Github Link: https://github.com/apache/age-viewer

University Management System in Apache AGE - Part-1

Muhammad Muneeb Ur Rehman — Wed, 17 May 2023 09:08:46 +0000

First, let's define the entities involved in the university management system. Some of the entities that come to mind are:

Entities:
Students
Teachers
Courses
Departments

Next, we need to define the relationships between these entities. Here are some of the relationships that exist in a university management system:

Relations:
A student can enroll in multiple courses.
A course can have multiple students enrolled in it.
A course is taught by one or more teacher.
A teacher can teach one or more courses.
A course is offered by one department.
A department can offer multiple courses.
A department can have multiple teachers.
A teacher can be affiliated with one department.

Based on the above entities and relationships, we can create an ER diagram for the university management system using a graph database.
The ER diagram will have the following entities:
Entities:
Student
Teacher
Course
Department

The ER diagram will have the following relationships:
Relations:
Enrolled in (Student -> Course)
Taught by (Course -> Teacher)
Offered by (Course -> Department)
Affiliated with (Teacher -> Department)

Once the ER diagram is created, we can use it to create the necessary Nodes and Edges in the graph (Apache AGE) database.

For more details visit: https://age.apache.org/overview/

AGE Github Link: https://github.com/apache/age

AGE Viewer Github Link: https://github.com/apache/age-viewer

Load Edges Data from CSV file to Apache AGE

Muhammad Muneeb Ur Rehman — Wed, 03 May 2023 16:48:35 +0000

In Apache AGE, we can load edges data from CSV file. A CSV file for edges should be formatted as follows:

start_id:
It is node id of the node from where the edge is stated. This id should be valid i.e., node with such id should exist.

start_vertex_type:
It should contain class/ label name of the node. This label should be valid.

end_id:
The end id of the node at which the edge shall be terminated. This id should also be valid i.e., node with such id should exist.

end_vertex_type:
It should contain class/ label name of the node. This label should be valid.

properties:
The properties of the edge. The header (1st Row) shall contain the property name. 2nd Row and onward rows contains data (values).

Create Edge Label:
SELECT create_elabel('GraphName','EdgeLabelName');

Load Edge Data from csv File:
SELECT load_edges_from_file('GraphName', 'EdgeLabelName', 'Path/to/file.csv');

For more details visit: https://age.apache.org/overview/

AGE Github Link: https://github.com/apache/age

AGE Viewer Github Link: https://github.com/apache/age-viewer

Load Vertices (Nodes) data from CSV file to Apache AGE

Muhammad Muneeb Ur Rehman — Tue, 18 Apr 2023 19:27:28 +0000

In Apache AGE, we can load the data of nodes/ vertices from CSV file as well.
A CSV file containing nodes' data should be formatted as following:
id:
It should be the first column of the file and all values should be a positive integer.

Properties:
All other columns should contain the properties for the nodes. Header row should contain the name of properties and rows below Header row should contain data. One row as a whole should be treated as one vertex.

First step is to create a label for the vertex.

Create Vertex Lable:
Syntax:
SELECT create_vlabel('GraphName','LabelName');

Second step is to get data from CSV file and create vertices.

Load Data from CSV:
Syntax:
SELECT load_labels_from_file('GraphName', 'LabelName', 'Path/to/file.csv');

For more details visit: https://age.apache.org/overview/

AGE Github Link: https://github.com/apache/age

AGE Viewer Github Link: https://github.com/apache/age-viewer

Delete Edges from Apache AGE

Muhammad Muneeb Ur Rehman — Tue, 18 Apr 2023 19:20:11 +0000

In Apache AGE, we can delete any edge by using DELETE command.

Query:
SELECT * FROM cypher('graph_name', $$ MATCH (n {name: 'Andres'})-[r:KNOWS]->() DELETE r $$) as (v agtype);

Explanation:
Firstly, we find the edge we want to delete by using MATCH for instance, MATCH (n {name: 'Andres'})-[r:KNOWS]->(). Then, we delete that edge by using, DELETE r.

For more details visit: https://age.apache.org/overview/

AGE Github Link: https://github.com/apache/age

AGE Viewer Github Link: https://github.com/apache/age-viewer