Forem: Ankush Goyal

ReactJs: useState

Ankush Goyal — Fri, 06 Dec 2024 19:06:07 +0000

The useState hook is a fundamental part of React that allows you to add state to functional components. Here's a detailed look at how it works:

What is `useState`?

useState is a hook that lets you add state variables to your functional components. It returns an array with two elements:

The current state value.
A function to update that state.

Basic Usage

To use useState, you need to import it from React and call it inside your functional component:

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable named 'count', initialized to 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

How It Works

Initial State: The argument passed to useState (in this case, 0) is the initial state.
State Variable: The first element of the array (count) is the current state.
State Setter Function: The second element (setCount) is a function that updates the state.

Updating State

You should always use the state setter function to update the state. Directly modifying the state variable won't trigger a re-render:

<button onClick={() => setCount(count + 1)}>Click me</button>

Multiple State Variables

You can use multiple useState calls to manage different pieces of state:

function UserProfile() {
  const [name, setName] = useState('John Doe');
  const [age, setAge] = useState(30);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button onClick={() => setAge(age + 1)}>Increase Age</button>
    </div>
  );
}

Complex State

For more complex state, you can use objects or arrays:

function Car() {
  const [car, setCar] = useState({ brand: 'Ford', model: 'Mustang', year: 1964 });

  const updateCar = () => {
    setCar(prevCar => ({
      ...prevCar,
      color: 'blue'
    }));
  };

  return (
    <div>
      <h1>My {car.brand}</h1>
      <p>It is a {car.color} {car.model} from {car.year}.</p>
      <button onClick={updateCar}>Change Color</button>
    </div>
  );
}

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

ReactJs: useEffect

Ankush Goyal — Fri, 06 Dec 2024 19:02:25 +0000

The useEffect hook in React is a powerful tool for handling side effects in functional components. Here's a breakdown of how it works and how you can use it effectively:

What is `useEffect`?

useEffect allows you to perform side effects in your components. Side effects can include data fetching, subscriptions, or manually changing the DOM. It combines the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount from class components.

Basic Usage

The useEffect hook takes two arguments:

A function that contains the side effect logic.
An optional array of dependencies that determine when the effect should run.

Example

Here's a simple example of using useEffect to fetch data:

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array means this effect runs once after the initial render

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

export default DataFetchingComponent;

Dependency Array

The second argument to useEffect is the dependency array. This array determines when the effect should re-run:

Empty Array ([]): The effect runs only once, after the initial render.
No Array: The effect runs after every render.
Specific Dependencies: The effect runs only when the specified dependencies change.

Cleanup

Some effects require cleanup to avoid memory leaks. You can return a cleanup function from the effect:

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('This will run after 1 second');
  }, 1000);

  return () => clearTimeout(timer); // Cleanup the timer
}, []);

Common Use Cases

Fetching Data: As shown in the example above.
Subscribing to Events: Adding and removing event listeners.
Timers: Setting up and clearing intervals or timeouts.

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

ReactJs: Virtual DOM

Ankush Goyal — Fri, 06 Dec 2024 18:55:49 +0000

The Virtual DOM (VDOM) is a concept used in React to optimize and manage updates to the user interface. Here's how it works:

What is the Virtual DOM?

The Virtual DOM is a lightweight, in-memory representation of the actual DOM. It is a JavaScript object that React uses to keep track of changes in the UI.

How Does It Work?

Initial Render: When a React component is rendered for the first time, a Virtual DOM tree is created that mirrors the structure of the actual DOM.
State Changes: When the state of a component changes, React creates a new Virtual DOM tree.
Diffing Algorithm: React compares the new Virtual DOM tree with the previous one using a process called "diffing." It identifies the changes (differences) between the two trees.
Reconciliation: React then updates only the parts of the actual DOM that have changed, rather than re-rendering the entire DOM. This process is called "reconciliation."

Benefits

Performance: By minimizing direct manipulation of the actual DOM, which is slow, the Virtual DOM improves performance.
Efficiency: React's diffing algorithm ensures that only the necessary updates are made, making the UI updates more efficient.

Example

Consider a simple example where a button click updates a counter:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

In this example, each time the button is clicked, the state changes, and React updates the Virtual DOM. It then compares the new Virtual DOM with the previous one, identifies the change in the counter value, and updates only the relevant part of the actual DOM.

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

Angular: Lazy Loading

Ankush Goyal — Thu, 28 Nov 2024 20:42:34 +0000

Lazy loading in Angular is a technique used to improve the performance of your application by loading feature modules only when they are needed. This can significantly reduce the initial load time of your application, as it avoids loading all the modules upfront.

How Lazy Loading Works

In Angular, lazy loading is typically implemented using the Angular Router. Instead of loading all the modules at once, you configure the router to load certain modules only when a specific route is accessed.

Steps to Implement Lazy Loading

Create a Feature Module: First, create a feature module that you want to load lazily. For example, let's create a UserModule.
```
ng generate module user --route user --module app.module
```

Configure Routes: In your AppRoutingModule, configure the route to use lazy loading. Use the loadChildren property to specify the path to the module.

const routes: Routes = [
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule)
  }
];

Set Up the Feature Module: In the UserModule, set up the routes specific to this module.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user.component';

const routes: Routes = [
  { path: '', component: UserComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

Load the Module: When the user navigates to the /user route, Angular will load the UserModule on demand.

Benefits of Lazy Loading

Improved Performance: Reduces the initial load time by loading only the necessary modules.
Better User Experience: Users can start interacting with the application faster.
Efficient Resource Usage: Loads resources only when needed, which can be particularly beneficial for large applications.

Example Scenario

Imagine you have an e-commerce application with several modules like Home, Products, Cart, and User. By implementing lazy loading, you can ensure that the Cart and User modules are only loaded when the user navigates to those sections, rather than loading everything upfront.

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

Javascript: async/await

Ankush Goyal — Thu, 28 Nov 2024 04:38:29 +0000

async and await are powerful features in JavaScript that make working with Promises easier and more readable. They allow you to write asynchronous code that looks and behaves like synchronous code. Here's a quick overview:

`async` Function

Definition: An async function is a function that returns a Promise. It allows you to use await within it.
Syntax:

  async function myFunction() {
    // Your code here
  }

`await` Keyword

Definition: The await keyword can only be used inside an async function. It pauses the execution of the async function and waits for the Promise to resolve or reject.
Syntax:

  let result = await somePromise;

Example

Here's a simple example to demonstrate how async and await work together:

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
}

async function getData() {
  console.log('Fetching data...');
  const data = await fetchData();
  console.log(data);
}

getData();

In this example:

fetchData is a function that returns a Promise, which resolves after 2 seconds.
getData is an async function that uses await to wait for fetchData to resolve.
When getData is called, it logs "Fetching data...", waits for fetchData to resolve, and then logs "Data fetched".

Benefits

Readability: async/await makes asynchronous code look more like synchronous code, which can be easier to read and understand.
Error Handling: You can use try...catch blocks with async/await to handle errors more cleanly.

Error Handling Example

async function getData() {
  try {
    console.log('Fetching data...');
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

getData();

In this example, if fetchData were to reject, the error would be caught by the catch block, and "Error fetching data:" would be logged along with the error message.

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

Angular: Reactive Form setValue v/s patchValue

Ankush Goyal — Thu, 28 Nov 2024 04:03:56 +0000

In Angular, setValue() and patchValue() are methods used to update the values of form controls in reactive forms. Here’s when to use each:

`setValue()`

Use When: You need to set all the values for the form controls.
Behavior: It requires that the object you pass matches the structure of the form group or form array exactly. If any control is missing, it will throw an error.
Example:

  this.form.setValue({
    firstName: 'John',
    lastName: 'Doe',
    age: 30
  });

In this example, the form must have controls for firstName, lastName, and age. If any of these are missing, setValue() will throw an error.

`patchValue()`

Use When: You need to update only some of the values for the form controls.
Behavior: It allows you to pass an object with a subset of the form group or form array values. It will only update the specified controls and leave the rest unchanged.
Example:

  this.form.patchValue({
    firstName: 'John'
  });

In this example, only the firstName control is updated. The other controls (lastName and age) remain unchanged.

Summary

setValue(): Use when you need to set all form controls and the object structure must match the form structure exactly.
patchValue(): Use when you need to update only specific form controls and the object structure can be a partial match.

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

Angular: ng-content

Ankush Goyal — Wed, 27 Nov 2024 04:10:25 +0000

ng-content is a directive in Angular that allows you to project content from a parent component into a child component. This is useful for creating reusable components that can accept dynamic content. Here's how it works:

Basic Usage

Child Component: Define a placeholder for the projected content using ng-content.

   import { Component } from '@angular/core';

   @Component({
     selector: 'app-child',
     template: `
       <div class="child">
         <ng-content></ng-content>
       </div>
     `,
     styles: [`
       .child {
         border: 1px solid #ccc;
         padding: 10px;
       }
     `]
   })
   export class ChildComponent {}

Parent Component: Use the child component and project content into it.

   import { Component } from '@angular/core';

   @Component({
     selector: 'app-parent',
     template: `
       <app-child>
         <p>This content is projected into the child component.</p>
       </app-child>
     `
   })
   export class ParentComponent {}

Multiple Slots

You can also define multiple content projection slots using the select attribute.

Child Component: Define multiple ng-content elements with select attributes.

   import { Component } from '@angular/core';

   @Component({
     selector: 'app-child',
     template: `
       <div class="header">
         <ng-content select="[header]"></ng-content>
       </div>
       <div class="body">
         <ng-content></ng-content>
       </div>
     `,
     styles: [`
       .header {
         background-color: #f1f1f1;
         padding: 10px;
       }
       .body {
         padding: 10px;
       }
     `]
   })
   export class ChildComponent {}

Parent Component: Use the child component and project content into the specified slots.

   import { Component } from '@angular/core';

   @Component({
     selector: 'app-parent',
     template: `
       <app-child>
         <div header>
           <h1>Header Content</h1>
         </div>
         <p>Body Content</p>
       </app-child>
     `
   })
   export class ParentComponent {}

Benefits of Using `ng-content`

Reusability: Create flexible and reusable components that can accept different content.
Separation of Concerns: Keep the component logic separate from the content, making it easier to manage and maintain.
Dynamic Content: Allow dynamic content to be injected into components, enhancing the flexibility of your application.

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

Angular: Pure v/s Impure pipe

Ankush Goyal — Wed, 27 Nov 2024 03:50:12 +0000

In Angular, pipes are used to transform data in templates. There are two types of pipes: pure and impure. Here's a comparison:

Pure Pipes

Stateless: Pure pipes do not maintain any internal state.
Performance: They are more efficient because Angular only calls them when it detects a pure change to the input value (e.g., a change in primitive values or object references).
Usage: Suitable for transformations that depend solely on the input value and do not rely on external factors.

Example:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'purePipe',
  pure: true
})
export class PurePipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // Transformation logic here
    return transformedValue;
  }
}

Impure Pipes

Stateful: Impure pipes can maintain internal state and may depend on external factors.
Performance: They are less efficient because Angular calls them on every change detection cycle, regardless of whether the input value has changed.
Usage: Suitable for transformations that depend on external factors or need to be updated frequently.

Example:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'impurePipe',
  pure: false
})
export class ImpurePipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // Transformation logic here
    return transformedValue;
  }
}

When to Use Each

Use Pure Pipes for most cases where the transformation depends only on the input value.
Use Impure Pipes when the transformation depends on external factors or needs to be recalculated frequently.

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

Angular: Observable v/s Promise

Ankush Goyal — Wed, 27 Nov 2024 03:35:45 +0000

Observables and Promises are both used to handle asynchronous operations in JavaScript, but they have some key differences:

Promises

Single Value: Promises handle a single asynchronous event and return a single value (or error).
Eager: Promises start executing immediately upon creation.
Not Cancellable: Once a Promise is initiated, it cannot be cancelled.
Syntax: Uses .then(), .catch(), and .finally() for chaining operations.

Example:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved!');
  }, 1000);
});

promise.then((value) => {
  console.log(value);
});

Observables

Multiple Values: Observables can emit multiple values over time.
Lazy: Observables do not start emitting values until they are subscribed to.
Cancellable: Subscriptions to Observables can be cancelled, stopping the emission of values.
Syntax: Uses .subscribe() to handle emitted values, errors, and completion.

Example:

import { Observable } from 'rxjs';

const observable = new Observable((subscriber) => {
  subscriber.next('First value');
  setTimeout(() => {
    subscriber.next('Second value');
    subscriber.complete();
  }, 1000);
});

const subscription = observable.subscribe({
  next(value) {
    console.log(value);
  },
  complete() {
    console.log('Observable complete');
  }
});

// To cancel the subscription
subscription.unsubscribe();

When to Use Each

Use Promises when you need to handle a single asynchronous operation.
Use Observables when you need to handle multiple asynchronous events or values over time, and when you need more control over the data stream (e.g., cancellation, transformation).

Thank you for reading!
I hope you found this article helpful and informative. If you enjoyed it or learned something new, feel free to share your thoughts in the comments or connect with me.

If you'd like to support my work and help me create more content like this, consider buying me a coffee. Your support means the world and keeps me motivated!

Thanks again for stopping by! 😊

Forem: Ankush Goyal

ReactJs: useState

What is useState?

Basic Usage

How It Works

Updating State

Multiple State Variables

Complex State

ReactJs: useEffect

What is useEffect?

Basic Usage

Example

Dependency Array

Cleanup

Common Use Cases

ReactJs: Virtual DOM

What is the Virtual DOM?

How Does It Work?

Benefits

Example

Angular: Lazy Loading

How Lazy Loading Works

Steps to Implement Lazy Loading

Benefits of Lazy Loading

Example Scenario

Javascript: async/await

async Function

await Keyword

Example

Benefits

Error Handling Example

Angular: Reactive Form setValue v/s patchValue

setValue()

patchValue()

Summary

Angular: ng-content

Basic Usage

Multiple Slots

Benefits of Using ng-content

Angular: Pure v/s Impure pipe

Pure Pipes

Impure Pipes

When to Use Each

Angular: Observable v/s Promise

Promises

Observables

When to Use Each

What is `useState`?

What is `useEffect`?

`async` Function

`await` Keyword

`setValue()`

`patchValue()`

Benefits of Using `ng-content`