DEV Community: Amrita-padhy

[Boost]

Amrita-padhy — Tue, 12 Aug 2025 09:34:09 +0000

Amrita-padhy

Aug 12 '25

My Personal Experience with the “Changing from Uncontrolled input to Controlled” Error

#webdev #react #beginners #programming

Comments

2 min read

My Personal Experience with the “Changing from Uncontrolled input to Controlled” Error

Amrita-padhy — Tue, 12 Aug 2025 09:32:55 +0000

When I first started building forms in my current project, I ran into this error:

hook.js:608 A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

It appeared in my browser console like an angry red flag every time my form loaded.

At first, I didn’t fully understand why React was upset. But after digging in, I realized the issue was this:

The root cause
An uncontrolled input becomes controlled if its value prop changes from undefined to a defined value after the first render.

Example of the problem:

<input value={formData.name} onChange={handleChange} />

If formData.name is undefined at first (maybe the data is still loading), React treats the input as uncontrolled.
But when the data finally loads and formData.name becomes "User", React sees that as switching from uncontrolled → controlled.

How I fixed it
I ensured the value was always defined, even before data loaded:

<input
  value={formData.name ?? ""}
  onChange={handleChange}
/>

Or, when using React Hook Form, I provided defaultValue explicitly:

<input {...register("name")} defaultValue="" />

For controlled components wrapped with Controller:

<Controller
  name="username"
  control={control}
  defaultValue="" // important!
  render={({ field }) => <InputText {...field} />}
/>

Lesson learned

Always decide upfront if your input will be controlled or uncontrolled.
If controlled, initialize value to an empty string (or a sensible default) instead of letting it be undefined.
If uncontrolled, don’t bind a value prop at all — use defaultValue or refs.

This small detail saved me hours of debugging and also made me appreciate why libraries like React Hook Form handle defaults so gracefully.

Understanding & Fixing FOUC in Next.js App Router (2025 Guide)

Amrita-padhy — Wed, 09 Apr 2025 13:34:26 +0000

FOUC (Flash of Unstyled Content) is a common but frustrating visual glitch that can happen in modern React apps — especially in Next.js App Router — where your layout appears unstyled briefly during page load or refresh.

What is FOUC?

FOUC happens when the browser renders HTML before your CSS or styles are applied — resulting in a flash of unstyled or partially styled elements.

In SSR frameworks like Next.js, this often happens due to mismatches between the server-rendered HTML and client-rendered UI.

Symptoms of FOUC

On refresh, your UI shows raw HTML (unstyled) for a moment before styles kick in.
CSS variables like --primary-color aren't applied until the page fully loads.

-The warning: Warning: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.

Common Causes of FOUC in Next.js App Router

Dynamic Theming (e.g., per-tenant styles via Redux/localStorage) When you load styles after hydration, like setting a theme color based on the current tenant:

useEffect(() => {
  document.documentElement.style.setProperty('--primary-color', tenantColor);
}, []);

This runs only after the page loads, so the browser renders unstyled HTML first → FOUC.

Using Date.now(), Math.random(), or typeof window in shared components
These values differ between server and client → causes hydration mismatch, and sometimes FOUC.
3rd-Party CSS Libraries Not Loaded Early Enough
If you're importing styles from UI libraries (e.g., PrimeReact, Tailwind CSS) inside components, they are loaded too late — causing unstyled content to flash on screen momentarily.

// Inside a component file (not recommended)
import 'primereact/resources/themes/lara-light-indigo/theme.css';

How to Fix FOUC in Next.js App Router

1.Always Import Global CSS in layout.tsx

 app/layout.tsx
import "primeflex/primeflex.css";
import "primereact/resources/themes/lara-light-indigo/theme.css";
import "./globals.scss"

This ensures styles are loaded before your app renders.

2.Provide Fallback Theme Styles in globals.scss

:root {
  --primary-color: #ff8c00; // fallback before tenant-specific color is applied
}

This avoids flashing unstyled buttons or layouts before tenant styles load.

3.Wrap Client-Side Logic in a Hydration Guard
Use this in a client component (e.g., HydrationWrapper.tsx):

"use client";
import { useEffect, useState } from "react";

export default function HydrationWrapper({ children }) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return <>{children}</>;
}

Then use it in layout.tsx:

<body>
  <HydrationWrapper>
    {children}
  </HydrationWrapper>
</body>

This delays rendering until the client takes control — preventing mismatches.

Bonus: Avoid These Anti-Patterns
❌ Avoid dynamic CSS imports.
❌ Don’t use Date.now() or Math.random() directly in render.
❌ Don’t read from localStorage or window in server components.
❌ Don’t conditionally render <html> or <head>in client components.

FOUC is annoying — but totally fixable in Next.js App Router. By carefully separating your server logic from client-specific theming or rendering, you can eliminate style flashes, avoid hydration warnings, and ensure a polished user experience.

Understanding onClick in React: onClick={handleClick}, onClick={handleClick()}, and onClick={() => handleClick()}

Amrita-padhy — Sat, 21 Dec 2024 05:50:35 +0000

When working with event handlers in React, the onClick attribute is one of the most commonly used props. It allows us to define what happens when a user clicks on a button or another interactive element. However, there are multiple ways to define the event handler, and the differences between them can sometimes be confusing.

In this blog, we will break down three common patterns:

onClick={handleClick}
onClick={handleClick()}
onClick={() => handleClick()}

1. onClick={handleClick}

This is the simplest and most common way to assign an event handler in React. Here, you are directly passing a reference to the handleClick function.

How It Works:
React saves the function reference and invokes it when the event occurs.

The function is not immediately called during render; it is executed only when the user interacts with the element.

Example:

function handleClick() {
  console.log('Button clicked');
}

<button onClick={handleClick}>Click Me</button>

Use Case:

Use this pattern when you do not need to pass any arguments or add additional logic to the event handler.

This is the most efficient and straightforward way to handle events.

Key Points:

No function is created during every render, making it better for performance.

The code is cleaner and easier to read.

2. onClick={handleClick()}

At first glance, this may look similar to the previous example, but it behaves very differently. Here, you are immediately invoking the handleClick function during render and passing its return value to the onClick prop.

How It Works:

When the component renders, handleClick() is executed immediately.

The return value of handleClick() is then assigned to the onClick attribute. If the return value is not a function, this will cause an error.

Example:

function handleClick() {
  console.log('This runs immediately!');
}

<button onClick={handleClick()}>Click Me</button>

What Happens:

As soon as the component renders, "This runs immediately!" is logged to the console.

The onClick handler will not work as intended because the function has already been executed.

Use Case:

This is rarely useful in React and is often the result of a mistake.

Avoid using this pattern unless you explicitly need the function to run during render (which is uncommon).

Key Points:

This does not bind the function to the event; instead, it executes it during render.

Misusing this pattern can lead to unintended side effects and bugs.

3. onClick={() => handleClick()}

This pattern uses an arrow function to wrap the handleClick function call. When the user clicks the button, the arrow function is executed, and it then calls handleClick.

How It Works:

A new function (the arrow function) is created on every render.

When the button is clicked, the arrow function is executed, and it calls handleClick.

Example:

function handleClick() {
  console.log('Button clicked');
}

<button onClick={() => handleClick()}>Click Me</button>

Use Case:

Use this pattern when you need to pass arguments to the handleClick function or when additional logic is required.

Example with Arguments:

function handleClick(message) {
  console.log(message);
}

<button onClick={() => handleClick('Hello, World!')}>Click

Key Points:

This creates a new function on every render, which may impact performance in large or frequently updated components.

Use it only when you need additional functionality, such as passing arguments or chaining multiple actions.

Best Practices

Use onClick={handleClick} whenever possible:

.It is the cleanest and most efficient way to handle events.
Use onClick={() => handleClick()} sparingly:

.Only use this pattern when passing arguments or additional logic is necessary.
Avoid onClick={handleClick()} unless explicitly required:

.This pattern is generally a mistake and can lead to unexpected behavior.

Conclusion

Understanding the differences between these three patterns can help you write cleaner, more efficient React code. Always prefer onClick={handleClick} for simple use cases, and reach for onClick={() => handleClick()} only when absolutely necessary. By avoiding common pitfalls like onClick={handleClick()}, you can ensure your event handlers work as intended and avoid unnecessary bugs.

Enhancing React Apps: Server Image Preview Component

Amrita-padhy — Sat, 22 Jun 2024 11:32:32 +0000

In this blog post, we'll walk through the process of creating a custom file preview component using React. We won't rely on any third-party libraries, ensuring you gain a deeper understanding of how to handle files directly in JavaScript. By the end of this tutorial, you'll be able to preview images, text files, xlxs files, pdf files in your React application.

const PdfViewer = ({ url }) => {
  const iframeRef = useRef(null);
  const interval = useRef();

  const pdfUrl = createGdocsUrl(url);

  const [loaded, setLoaded] = useState(false);

  const clearCheckingInterval = () => {
    clearInterval(interval.current);
  };

  const onIframeLoaded = () => {
    clearCheckingInterval();
    setLoaded(true);
  };

  useEffect(() => {
    interval.current = setInterval(() => {
      try {
        // google docs page is blank (204), hence we need to reload the iframe.
        if (iframeRef.current.contentWindow.document.body.innerHTML === '') {
          iframeRef.current.src = pdfUrl;
        }
      } catch (e) {
        // google docs page is being loaded, but will throw CORS error.
        // it mean that the page won't be blank and we can remove the checking interval.
        onIframeLoaded();
      }
    }, 4000); // 4000ms is reasonable time to load 2MB document

    return clearCheckingInterval;
  }, []);

  return (
    <div className={css['pdf-iframe__wrapper']}>
      <iframe
        ref={iframeRef}
        className={css['pdf-iframe__inside']}
        frameBorder="no"
        onLoad={onIframeLoaded}
        src={pdfUrl}
        title="PDF Viewer"
      />

      {!loaded && (
        <div className={css['pdf-iframe__skeleton']}>
          <Skeleton height="100%" rectRadius={{ rx: 0, ry: 0 }} width="100%" />
        </div>
      )}
    </div>
  );
};

In this blog post, we created a custom file preview component using React without relying on any third-party libraries. We learned how to read file contents, and display previews .

Potential enhancements include adding support for more file types, improving the styling, and handling errors more gracefully. Happy coding!

Feel free to reach out in the comments if you have any questions or suggestions!

Exploring HTTP Protocol: Can You Send a GET Call with a POST Method ? and Vice Versa

Amrita-padhy — Tue, 09 Apr 2024 05:53:42 +0000

In a recent web development job interview, I faced an unexpected question that led me to dive deep into HTTP methods. The interviewer asked: "Can you use the POST method to send a GET call, and vice versa?" This question caught me off guard, but it made me realize how crucial understanding HTTP methods is in web development.

In this blog post, I'll share my journey of exploring this question, from initial surprise to valuable insights gained through research and reflection. By understanding the nuances of HTTP methods, we can better grasp the basics of web development and API design.

GET Request with POST Method:

A GET request is typically used for fetching data from a server. It's meant to be idempotent, meaning making the same request multiple times should have the same effect as making it once.
POST requests, on the other hand, are intended for submitting data to the server to be processed. They may have side effects, such as updating a database or creating a new resource.
Sending a GET request with a POST method (by including parameters in the request body instead of the URL) violates the HTTP specification and can lead to confusion and unexpected behavior. It's not a recommended practice.

POST Request with GET Method:

Similarly, while you can technically send a POST request with a GET method (by including parameters in the URL instead of the request body), it's also not recommended.
GET requests are meant for retrieving data and should not have side effects on the server.
POST requests, on the other hand, are intended for actions that may change the state of the server or create new resources.

In both cases, using the wrong method for the intended purpose can lead to issues with interoperability, confusion, and unexpected behavior.

Therefore, it's essential to use the appropriate HTTP method based on the semantics of the request:

Use GET for retrieving data from the server.
Use POST for submitting data to the server to be processed.

While it's interesting to understand that HTTP methods are flexible in this way, it's crucial to adhere to best practices for clarity, consistency, and maintaining the integrity of web applications.

You can technically send a GET request with a POST method and vice versa, but it's generally not recommended or considered good practice

TypeScript Journey: A Beginner's Journey into Typed JavaScript

Amrita-padhy — Mon, 18 Mar 2024 16:12:41 +0000

TypeScript: An Overview
TypeScript is a programming language built on top of JavaScript. Every JavaScript file is a valid TypeScript file, but TypeScript adds some powerful features that enhance the robustness and maintainability of applications.

What is TypeScript?
TypeScript addresses the shortcomings of JavaScript by introducing features like static typing. In static typing, variables can be declared with a specific type, such as a number or string. Unlike dynamic typing found in languages like JavaScript, TypeScript provides type checking at compile time.

Benefits of TypeScript

Static Typing: Enables catching type-related errors early in the development process.
Code Compilation: TypeScript code is compiled into JavaScript, making it compatible with all browsers.
Refactoring: Easier code refactoring due to the availability of type information.
Short-hand Notation: Provides concise syntax for common patterns, improving code readability and maintainability.

Drawbacks of TypeScript

Compilation Step: Requires a compilation step before running the code, adding an extra layer of complexity to the development process.
Discipline in Coding: Developers need to adhere to TypeScript's typing rules and guidelines, which may require additional effort and discipline.

Compilation Process

To use TypeScript in a web application, the TypeScript code must be transpiled into JavaScript using a TypeScript compiler. This transpilation process ensures that the resulting JavaScript code is compatible with all browsers.

Switch Vs. If else

Amrita-padhy — Tue, 12 Mar 2024 05:00:57 +0000

As I learned JavaScript, I often found myself stuck between using switch or if-else statements. It's a common dilemma for beginners. Let's dive into these two choices together, exploring what they offer and when to use each one.

Readability: For simple cases where you're testing the value of a single variable against multiple conditions, switch statements can often be more readable and maintainable. They provide a clear structure for handling multiple cases.

switch (day) { case 'Monday': case 'Tuesday': case 'Wednesday': case 'Thursday': case 'Friday': console.log('Weekday'); break; case 'Saturday': case 'Sunday': console.log('Weekend'); break; default: console.log('Invalid day'); }

Performance: In JavaScript, the performance difference between switch and if-else statements is generally negligible. Modern JavaScript engines are quite efficient in optimizing both constructs.

Flexibility: if-else statements provide more flexibility for complex conditional logic. You can use logical operators and test multiple conditions within a single if or else if block, which can sometimes be more concise and expressive.

if (score >= 90) { console.log('A'); } else if (score >= 80) { console.log('B'); } else if (score >= 70) { console.log('C'); } else { console.log('D'); }

Handling Different Types of Conditions: if-else statements are more versatile when dealing with conditions beyond simple value comparisons, such as ranges or boolean expressions.

if (age < 18) { console.log('Minor'); } else if (age >= 18 && age < 65) { console.log('Adult'); } else { console.log('Senior'); }

Here’s the general layout of an if-else statement verses the switch case:
This is the general syntax of an if-else statement:

if (condition1) { //Body of if }

else if (condition2) { //Body of if }

else if (condition3) { //Body of if }

else { //default if all conditions return false }

And this is the general syntax for switch:

switch ( variable )

{

case <variable value1>: //Do Something

break;

case <variable value2>://Do Something

break;

default: //Default will perform if all case’s fail

break;

}

The if-else ladder is of type strict condition check, while switch is of type jump value catching.

Some key advantages of switch over if-else ladder:

A switch statement works much faster than an equivalent if-else ladder. It’s because the compiler generates a jump table for a switch during compilation. As a result, during execution, instead of checking which case is satisfied, it only decides which case has to be executed.
It’s more readable compared to if-else statements.

In the end, the choice is yours and I hope this blog helps lead you in the right path to making the most informed decision when to use an if-else statement verses a switch case!

JavaScript Array Hacks: Deleting Elements Like a Pro

Amrita-padhy — Mon, 25 Dec 2023 11:15:44 +0000

JavaScript array is a single variable that is used to store the elements or a group of values.

You can add or remove elements from the array in any position.

Here, we will discuss different ways to remove elements from the array.

Methods to Remove Elements from JavaScript Array:
There are many methods that are used to remove elements from JavaScript array which are discussed below

Using the pop() method
Using the shift() method
Using the splice() method
Using the filter() method
Using Delete Operator
Using a simple for() loop and a new array

1: using the pop() method:

This method is used to remove the last element of the array and returns the removed element. This function decreases the length of the array by 1.

const array = ["apple", "mango", "banana", "orange"];
  const popedArray = array.pop();
  console.log(popedArray);
  console.log(array);
  // output =  orange
  // output =  ['apple', 'mango', 'banana']

2: using the shift() method:

This method is used to remove the first element of the array and reduce the size of the original array by 1.

 const array = ["apple", "mango", "banana", "orange"];
  const shiftedArray = array.shift();
  console.log(shiftedArray);
  console.log(array);
  // output =  apple
  // output =   ['mango', 'banana', 'orange']

3: using the splice() method:

This method is used to modify the contents of an array by removing the existing elements and/or adding new elements. To remove elements by the splice() method you can specify the elements in different ways.

  const array = ["apple", "mango", "banana", "orange"];
  const splicedArray = array.splice(2, 1);
  console.log(splicedArray);   // output =  ['banana']
  console.log(array); // output =   ['apple', 'mango', 'orange']

here in this example array.splice(2, 1) , 2 is index of deleting element and 1 is number of elements you want to delete .

4: using the filter() method:

This method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument function.

 function isPositive(value) {
    return value > 0;
  }
  const array = [1, 3, 45, 124, -1, 0, 125];
  const filtereddArray = array.filter(isPositive);
  console.log(filtereddArray); // output =  [1, 3, 45, 124, 125]

5: using the Delete Operator:

Use the delete operator to remove elements from a JavaScript array.

const array = [1, 3, 45, 20];
  const deleted = delete array[2];
  console.log(deleted); // output =  true
  console.log(array); // output =  [1, 3, empty, 20]

6: using the for loop:

Here a simple for() will be run over the array and the except for the removed element, the remaining elements will be pushed into the new array which will be declared inside the function or a method.

  let removeElement = (array, n) => {
    let newArray = [];

    for (let i = 0; i < array.length; i++) {
      if (array[i] !== n) {
        newArray.push(array[i]);
      }
    }
    return newArray;
  };

  let passed_in_array = [1, 2, 3, 4, 5];
  let element_to_be_removed = 2;
  let result = removeElement(passed_in_array, element_to_be_removed);
  console.log(result); // output  [1, 3, 4, 5]

While I find filter() and splice() convenient for deleting elements from a JavaScript array in certain scenarios due to their readability and simplicity, I also recognize the importance of understanding fundamental techniques the classic for loop remains a cornerstone in array manipulation.

React CRUD Operations Made Easy with Array Methods

Amrita-padhy — Tue, 12 Dec 2023 09:33:54 +0000

What is CRUD ?

CRUD operation in React stands for Create, Read, Update, and Delete. CRUD is an important concept for organizing and managing data across the web application. We will perform CRUD operation in the React application with local storage in the form of JavaScript Objects instead of using JSON servers or Axios in React.

Create: Creating a post or adding the table row, adding data to the webpage, or creating content.
Read: Reading or retrieving data from a web page
Update: Updating or editing existing content on the webpage
Delete: Deleting and removing the entry or content/post from the webpage

Here's a guide on which array methods you can use for each CRUD operation:

1. Create (C):
To add a new element to the array, you can use the concat() method or the spread operator (...).

// Using concat
const newArray = oldArray.concat(newElement);

// Using spread operator
const newArray = [...oldArray, newElement];

2-Read (R):
Reading or retrieving data from an array can be done using methods like map(), filter(), or accessing elements by index.

// Using map
const mappedArray = oldArray.map(item => /* transform item if needed */);

// Using filter
const filteredArray = oldArray.filter(item => /* condition */);

// Accessing by index
const elementAtIndex = oldArray[index];

3-Update (U):
Updating data in an array can be done using methods like map() or splice().

// Using map to update a specific item
const updatedArray = oldArray.map(item => item.id === itemId ? updatedItem : item);

// Using splice to replace an item at a specific index
const updatedArray = [...oldArray];
updatedArray.splice(index, 1, updatedItem);

4-Delete (D):
Deleting an element from an array can be achieved with methods like filter() or splice().

// Using filter to remove a specific item
const newArray = oldArray.filter(item => item.id !== itemId);

// Using splice to remove an item at a specific index
const newArray = [...oldArray];
newArray.splice(index, 1);

CRUD operations are fundamental for building applications that interact with databases or any form of data storage.
uses of appropriate method based on your specific use case.

Choosing the Right Path: Ternary Operator vs. Logical AND for Conditional Rendering in React

Amrita-padhy — Tue, 28 Nov 2023 04:38:26 +0000

what is conditional rendaring

Conditional rendering in React refers to the ability to render different components or content based on certain conditions. This allows developers to dynamically display different parts of the user interface depending on the state of the application or the data being received.

In JavaScript and React, conditional rendering is often accomplished using conditional statements or operators. Two common methods for conditional rendering in React are:
1-Ternary Operator (? :):

{condition ? <TrueComponent /> : <FalseComponent />}

2-Logical AND (&&) Operator:

{condition && <TrueComponent />}

In the examples above, if the condition is true, will be rendered; otherwise, (in the case of the ternary operator) or nothing at all (in the case of the logical AND operator) will be rendered.

which way is better and why?

Both the ternary operator (? :) and the && operator are valid approaches for conditional rendering in React, and each has its use cases.
The choice between them often comes down to personal or team preference, readability, and the specific requirements of the code.

1. Ternary Operator (? :):

{condition ? <TrueComponent /> : <FalseComponent />}

Pros:

1. Explicitly shows the true and false cases.
2. Easy to read and understand, especially for complex conditions.

Cons:

Slightly longer syntax compared to the && operator.

2. Logical AND (&&) Operator:

{condition && <TrueComponent />}

Pros:

Concise and often preferred for simple conditions.
Can be more readable for shorter expressions.

Cons:

May be less explicit, especially for more complex conditions.
Only works well when you want to render the component when the condition is true.

Considerations:

Readability: Choose the approach that makes your code more readable, especially considering the complexity of your conditions.

Consistency: It's often beneficial to maintain consistency within a codebase. If your team has a preference, it's good to stick with it for consistency.

Use Case: For simple conditions where you want to render a component based on a single boolean expression, the && operator might be more concise. For more complex conditions or when rendering different components based on multiple conditions, the ternary operator might be clearer.

All about router guards in react js

Amrita-padhy — Mon, 27 Nov 2023 14:00:12 +0000

What is router guard
In React applications, a router guard is a mechanism for controlling navigation based on certain conditions or requirements. The goal is to prevent or allow navigation to specific routes based on certain criteria. This is often used to implement features such as
1-authentication checks,
2-form submission confirmation,
3-preventing users from navigating away with unsaved changes.

How to implement
react-router-dom library is commonly used for handling routing. The Route component from react-router-dom allows you to render different components based on the current URL. A router guard can be implemented by using the useNavigate hook.

Use case
Here is a small usecase example for implementing router guards . whenever user is filling a form , and user did not submit it and click cancel then user can not redirect directly to previous route.
IN this case a conformation modal will show and ask the user wheather you want to leave the page or continue

// Guard.js
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Dialog } from "primereact/dialog";
import { Button } from "primereact/button";

const Guard = ({ showModal, setShowModal }) => {
  const [confirmNavigation, setConfirmNavigation] = useState(false);
  const navigate = useNavigate();

  const onOkClick = () => {
    if (confirmNavigation) {
      setShowModal(false);
      navigate("/");
    }
  };

  const onDialogCancel = () => {
    setShowModal(false);
    setConfirmNavigation(false);
  };

  const onDialogProceed = () => {
    setConfirmNavigation(true);
    onOkClick();
  };

  return (
    <div>
      <Dialog
        header="Confirmation"
        visible={showModal}
        onHide={onDialogCancel}
        style={{ padding: "15px", width: "600px" }}
        footer={
          <div>
            <Button
              label="No"
              icon="pi pi-times"
              onClick={onDialogCancel}
              className="p-button-text"
              style={{ padding: "5px" }}
            />
            <Button
              label="Yes"
              text
              icon="pi pi-check"
              onClick={onDialogProceed}
              style={{ padding: "5px" }}
            />
          </div>
        }
      >
        <p style={{ padding: "15px" }}>Do you want to leave the page?</p>
      </Dialog>
    </div>
  );
};

export default Guard;

On cancel button click this Guard component will show. and it will prevent the user to directly go back to previous route .