DEV Community: Geetika Bajpai

Why Cypress?

Geetika Bajpai — Tue, 20 Aug 2024 18:06:09 +0000

An all in-in-one testing framework, assertion library, with mocking and stubbing.
Focus on E2E and component testing -- real world testing.
Runs in the browser and wrote in javascript.
Good performance and can be integrated in CI/CD easily.
Native access to the DOM and to your app.
Great developer UX.
Generally not flaky if you follow the best practices.

Basics about Backend

Geetika Bajpai — Thu, 01 Aug 2024 19:06:22 +0000

Backend has 2 major components:-
1. A Programming Language:- Java, javascript, php, golang, c++ etc. ( Almost all these languages use some framework or library).
2. A Database:- Mongo, MySQL, Postgres, sqlite etc. (Similarly, you will use an ORM (Object-Relational Mapping) or ODM (Object Document Mapping) when interacting with databases. Names like Prisma and Mongoose will come up).

Frontend (Browser and Mobile):Users interact with the application through the browser or mobile app.

API (Application Programming Interface):Acts as an intermediary, allowing the frontend to communicate with the backend server.

Backend:Processes requests from the frontend, interacts with the database, and sends responses back.
Contains the logic and functions needed to handle specific tasks like user authentication.

Database:Stores application data and is located in another continent for better performance and redundancy.

When dealing with backend development, you primarily handle three types of tasks:

1.Data Handling:

The most common task in backend development is processing data received from the frontend.
Example: When a user tries to log in, the frontend sends the username and password to the backend. The backend verifies these credentials against the database and sends a response back to the frontend.

2.File Handling:

Backends often need to handle file uploads and downloads. This can include storing files on the server or retrieving them for user access.
Example: A user uploads a profile picture. The backend saves this image to the server and updates the user's profile to reference the uploaded file.

3.Third-Party API Integration:

Backends frequently interact with third-party services to extend functionality.
Example: To send an email confirmation, the backend may use an email service provider's API. The backend sends the necessary data (recipient email, subject, message body) to the third-party API, which then handles the email sending.

In modern JavaScript environments, there are several options for backend development beyond the traditional Node.js. Here are the key points:

Multiple Runtime Environments:

Historically, learning backend development in JavaScript often started with Node.js.
Nowadays, there are alternative runtime environments like Deno and Bun.
You can even mix environments, using part of your backend on Node.js and part on Deno or Bun.

The file structure I am referring to is a common organization pattern used in backend development, regardless of the specific programming language or framework. Here's a breakdown of the typical components based on the content you provided:

1. Root Directory

index.js or main.js: This is the entry point of your application. It’s where you initialize and start your application, connect to the database, and set up basic configurations.

2. Folders and Files

app.js:This file typically contains the main application logic and configuration settings, such as middleware setup, routes configuration, and application-level settings.

config/:

Configuration Files:These files include environment-specific settings such as database connections, API keys, and other constants.
Example: config.js, databaseConfig.js.

constants/:

constants.js:Contains immutable values or configurations used throughout the application. This can include things like status codes, roles, or types. For instance, if you're building a booking application, constants might include seat types (e.g., window, middle, aisle).

models/:

Model Definitions:Defines the schema for the data stored in your database. This is where you set up how your data is structured and validated.
Example:userModel.js, productModel.js.

controllers/:

Controller Logic: Contains functions or methods that handle business logic. Controllers manage the requests and responses, processing data and interacting with models.
Example: userController.js, productController.js.

routes/:

Routing Definitions:Maps URLs to specific controller actions. This determines how different HTTP requests (GET, POST, etc.) are routed to the appropriate controllers.
Example:userRoutes.js, productRoutes.js.

middlewares/:

Middleware Functions:Contains functions that execute during the request-response cycle, such as authentication checks, logging, or data validation.
Example: authMiddleware.js, errorHandlingMiddleware.js.

utils/:

Utility Functions: Houses reusable functions or helpers used across the application, such as email sending functions or file upload handlers.
ExampleemailHelper.js, fileUploadHelper.js.

database/:

Database Initialization:Contains scripts or configurations related to database setup and connections.
Example:dbConnection.js, dbSetup.js.

`views`/ (if applicable):

Template Files:Used if the application includes server-side rendering. This directory contains the view templates or files used to generate HTML content.
Example: index.ejs, userProfile.ejs.

3. Other Files

package.json: Manages dependencies and scripts for the project.
.env: Stores environment variables like database credentials or API keys.
.gitignore: Specifies which files and directories should be ignored by version control

React Redux Toolkit

Geetika Bajpai — Thu, 27 Jun 2024 19:24:54 +0000

Problem Statement

When working with React, you typically engage in larger projects. Otherwise, HTML and CSS suffice for simpler development needs. A substantial project involves numerous components and elements, as seen in an ecommerce website. Synchronizing these components—such as updating the cart and total upon clicking "Add to Cart"—can pose challenges.

Without a redux this is how we implement this

We are doing prop drilling here.

Here, we observe tight coupling because each component relies on its parent to access state. The solution lies in implementing a single source of truth.

The concept of a "single source of truth" dictates that state components should not reside in the app component but rather in a centralized store accessible to any component. The cart subscribes to this store, ensuring that any changes trigger its re-rendering. On the product page, when an item is added, it updates the store, prompting the cart to re-render in response to these changes.

Architecture of Redux

React Redux is a popular library combination used in React applications to manage state and facilitate data flow. Here's a breakdown of its architecture:

With the UI handler button clicked.
From button goes to handler function and handler function dispatch event.
Event goes to store(store does know what to do with event).
Store give event to reducer with the current value of the state.
Reducer will do the changes on the current value based on the event.
Reducer return the new value to redux store.
Redux Store will accept that new value.
And those components who are listing that value or subscribed that will get update.

Install Redux Toolkit and React-Redux

Add the Redux Toolkit and React-Redux packages to your project:

Create a Redux Store

Create store.ts file inside store folder

export const store = configureStore({ ... });: Calls the configureStore function to create a Redux store instance. It accepts an object with configuration options.
reducer: An object that specifies how different slices of the application's state should be combined. In this case, the counterSlice is assigned to the cart key. This means that the counterSlice will manage the state stored under the cart slice of the Redux store.

The provided code sets up a Redux store using @reduxjs/toolkit's configureStore function. It configures the store to use a counterSlice to manage the state related to the cart. Finally, it exports the configured store instance so that it can be imported and used throughout the application to manage and access application state.

It renders the App component wrapped in to provide access to the Redux store. The use of ReactDOM.createRoot and root.render(...) indicates the usage of React Concurrent Mode, allowing for more predictable rendering and performance optimizations in modern React applications.

Now, we will make slices
Every feature is a slice, a Redux state slice represents a modular, encapsulated part of the application state managed by Redux. It helps organize and manage state in a more structured and maintainable manner, particularly in larger applications with complex state requirements.

We will create a folder slices inside redux folder and inside slices folder create counter folder and the we will create counter.ts file inside that.

initialState = 0: Specifies the initial state of the application, which is set to 0.
The reducer handles different action types (INCREMENT and DECREMENT) by returning a new state based on the current state and the action type. If the action type does not match any case (default), it returns the current state unchanged.

The line export const { increment, decrement, incrementByAmount } = counterSlice.actions simplifies the process of creating and exporting action creators from a Redux slice defined using Redux Toolkit's createSlice. It promotes cleaner and more concise Redux-related code by automatically generating these action creators based on defined reducers.

Now create hooks inside index.ts which will create in a new folder created called hooks folder in redux folder.

useDispatch and useSelector are React Redux hooks used for interacting with the Redux store in functional components.
useDispatch: Hook used to obtain a reference to the Redux dispatch function, which is used to dispatch actions to the Redux store.
useSelector: Hook used to extract and return data from the Redux store state.

we can do this with simple state then why we do this complex so let me show you why create MyComp.ts in src

So, here we create some dummy component.

Then render my component there

So here when we increment one component other also render because this MyComp is also using state means there components subscribed store

useMemo Hook

Geetika Bajpai — Wed, 26 Jun 2024 20:50:39 +0000

useMemo is a hook that allows you to memoize expensive calculations to avoid unnecessary re-computations on every render.

Explanation of the Code

This React component, MemoTutorial, demonstrates how to use the useMemo hook to optimize performance by memoizing the result of a function that computes the longest name from a list of comments fetched from an API. Let's break down the code step by step.

1. Imports:

axios is used to make HTTP requests.
useEffect, useState, and useMemo are hooks from React.

2. Component Definition:

The MemoTutorial function is the React component.

3. State Variables:

data: Holds the comments fetched from the API.
toggle: A boolean used to trigger re-renders.

4. Fetching Data:

useEffect is used to fetch data from the API when the component mounts.
The empty dependency array ([]) ensures this effect runs only once.

5. Finding the Longest Name:

This function iterates through the comments array to find and return the longest name.

6. Using useMemo:

useMemo memoizes the result of findLongestName(data).
The function findLongestName(data) is called only when toggle changes.
If toggle remains unchanged, the previously computed result is returned without recomputing.

7. Rendering the Component:

getLongestName is displayed in a div.
A button toggles the toggle state.
When toggle is true, "toggle" is displayed in an h1.

Why Use useMemo?

1. Performance Optimization:

It helps prevent expensive calculations from being performed on every render.
In this example, findLongestName can be computationally expensive if the list of comments is large.

2. Dependencies:

The result of the memoized function (findLongestName) is recalculated only when the specified dependencies ([toggle]) change.
If the dependencies do not change, React returns the memoized value from the previous render.

3. Example Context:

Here, useMemo ensures findLongestName(data) is only recalculated when toggle changes.
Even if the component re-renders due to changes in other state or props, the memoized result is reused, avoiding redundant computations.

React Context API

Geetika Bajpai — Wed, 26 Jun 2024 19:19:42 +0000

Why do we need context API.

In React, passing props is a fundamental concept that enables a parent component to share data with its child components as well as other components within an application.

Prop Drilling Explained:

State in Component A:

Component A holds a piece of state, value: 1, and a function to update it, setCount().

Passing State through Components:

To get the state (value) and the function (setCount()) to Component D, Component A needs to pass them as props to Component B.Component B, in turn, passes these props down to Component C.Finally, Component C passes them down to Component D.

Problems with Prop Drilling:

Complexity: As the number of components grows, the process of passing props through each intermediate component becomes cumbersome and error-prone.
Maintenance: If the state or function needs to be used by additional components at different levels, the structure must be adjusted accordingly, leading to increased complexity and reduced maintainability.

Need for React Context API:

React Context API allows for state to be managed and accessed at a centralized place inside context. With Context API, the state and functions can be made available directly to any component in the component tree without passing props through each intermediate component.

Simplified Code: No need to pass props through multiple layers, leading to cleaner and more understandable code.
Flexibility: State and functions can be accessed and updated by any component within the provider, making the application more flexible and easier to maintain.

Now component A and D both can access without prop drilling. If component A change the state automatically component D re-render. Because component should also be re-render with fresh data. Means whenever in our context state changes those components who are reading that re-render itself with new value.

If we need to give access of context to these components so you need to wrap inside contextProvider.

if we don't give contextProvider these context will not access that context state. Now, in context these components can read and write also.

Now, we will start and see the code this increment decrement.

We will create Counter.jsx file inside context and write this.

This code defines a React context for managing a counter state and provides a context provider component to wrap parts of the application that need access to this counter state.

`export const CounterContext = createContext(null);`

This line creates a context using createContext from React.
CounterContext will be used to share state (and potentially other values) across the component tree without having to pass props down manually at every level.
Initially, the context is set to null, meaning it has no default value.

CounterProvider

The useState hook to create a piece of state called count and a function to update it called setCount.
count is initialized to 0.
Inside returns a CounterContext.Provider component the value prop of the provider is an object containing count, setCount, and name: "Geet".
- count: The current count value.
- setCount: The function to update the count value.
- name: "Geet": A static value just for demonstration purposes (it could be anything you want to share via context).
{props.children}: This ensures that any components wrapped by CounterProvider will be rendered inside the provider, making the context values (count, setCount, and name) available to those components.

Wrap your application (or part of it) with CounterProvider like this

This code defines a Counter component in React that interacts with a shared counter state using the CounterContext.

useContext(CounterContext) is called to access the values provided by the CounterProvider.
counterContext now holds the context value, which includes the count and setCount state, and any other values provided by the context.
The Counter component returns a div containing two buttons.
The Increment button has an onClick handler that calls setCount with the current count incremented by 1.
The Decrement button has an onClick handler that calls setCount with the current count decremented by 1.

This code defines the App component for a React application that uses the CounterContext to manage and display a shared counter state.

App Component:

Uses useContext to access the CounterContext.
Displays the current count from the context.
Renders four Counter components, each of which can increment and decrement the shared counter state.
This setup demonstrates how React context can be used for state management across multiple components, providing a shared state that can be accessed and modified by any component within the context provider.

useImperativeHandle hook

Geetika Bajpai — Tue, 25 Jun 2024 11:32:50 +0000

useImperativeHandle: This hook customizes the instance value that is exposed to parent components when using ref. It allows you to define methods on the child component that can be called from the parent component.

forwardRef: This is a React higher-order component that allows a parent component to directly interact with a child component's ref. It forwards the ref through the component to one of its child DOM nodes.

State Management:

useState hook is used to create a state variable toggle with an initial value of false.
setToggle is the function to update the toggle state.

Forwarding the Ref:

The Button component is wrapped with forwardRef to forward the ref to its internal DOM or methods.

Using useImperativeHandle:

Inside useImperativeHandle, we define an object with the method alterToggle.
alterToggle method toggles the value of toggle state.
This method will be exposed to the parent component through the ref.

Rendering:

The component renders a button with the text "Button From Child".
If toggle is true, it also renders a with the text "Toggle".

Creating a Ref:

useRef hook is used to create a ref called buttonRef. This ref will be used to access the alterToggle method defined in the Button component.

Parent Button:

A button is rendered with the text "Button From Parent".When this button is clicked, it calls buttonRef.current.alterToggle(). This triggers the alterToggle method in the Button component, toggling the toggle state.

Child Button:

The Button component is rendered with ref={buttonRef}, which forwards the buttonRef to the Button component, making the alterToggle method accessible to the parent.

Summary

forwardRef: Allows the parent to pass a ref to the child component.
useImperativeHandle: Exposes custom methods (alterToggle in this case) from the child component to the parent component through the ref.

This pattern is useful when you need to control a child component imperatively, especially when dealing with complex or non-trivial UI interactions that are difficult to achieve through props alone.

useLayoutEffect hook

Geetika Bajpai — Tue, 25 Jun 2024 10:51:33 +0000

useLayoutEffect is called with a callback function and an empty dependency array ([]).
This hook runs synchronously after DOM updates but before the browser paints the screen.
In this example, it logs the current value of the input referenced by inputRef.

useLayoutEffect: This hook is similar to useEffect, but it fires synchronously after all DOM mutations. It is useful when you need to perform operations that require measurements or calculations involving the DOM, just before the browser paints. This can include updating styles, calculating dimensions, or querying DOM properties that affect layout. In this example, useLayoutEffect logs the initial value of the input field ("PEDRO") before any layout updates occur.

Why Use useLayoutEffect

Use Case: You would use useLayoutEffect when you need to ensure that your code runs synchronously after DOM mutations but before the browser paints the screen. This can be critical for operations that require precise DOM measurements or visual updates that need to be reflected immediately to avoid flickering or layout shifts.

Comparison with useEffect: If your side effect does not need to interact with the DOM synchronously or doesn't depend on the current visual state of the component, useEffect is typically more appropriate. useEffect runs asynchronously after the browser paints, making it suitable for less time-sensitive operations.

The LayoutEffectTutorial component showcases the usage of useLayoutEffect and useEffect hooks in React. useLayoutEffect is utilized for synchronously accessing and logging the initial value of an input field before layout changes, while useEffect asynchronously sets an initial value for the input field. These hooks, combined with useRef, demonstrate how to manage side effects and references in functional components effectively.

useReducer hook

Geetika Bajpai — Tue, 25 Jun 2024 10:07:02 +0000

We will see how to implement this using the useState hook.

The ReducerTutorial React component demonstrates the use of the useState hook to manage two state variables: count (initialized to 0) and showText (initialized to true). The component renders a count value, a button, and conditionally displays a paragraph of text based on the value of showText. When the button is clicked, the count is incremented by 1 and showText is toggled between true and false, controlling the visibility of the text.

Understanding useReducer

useReducer is a React hook that is used for managing more complex state logic in a component, especially when the state depends on previous states or involves multiple state variables. It is an alternative to useState and is particularly useful when you have a complex state object or need to handle complex state transitions.

Why Use useReducer Here

In the context of the ReducerTutorial component, useReducer could be used instead of useState for several reasons:

Complex State Logic: If the state transitions (how state changes in response to actions) are complex, useReducer provides a more structured approach.
Multiple State Variables: Managing multiple related state variables can become cumbersome with useState. useReducer allows grouping related state variables together.
Predictable State Updates: useReducer ensures state updates are predictable and easier to trace, as all state changes are handled through a single function (the reducer).

What is useReducer

useReducer is a hook that takes two arguments:

A reducer function: (state, action) => newState
An initial state
The reducer function contains the logic to determine the new state based on the current state and the action dispatched. useReducer returns an array with the current state and a dispatch function, which is used to dispatch actions that trigger state transitions.

Code Explanation

The ReducerTutorial component demonstrates the use of the useReducer hook to manage complex state in React. It defines a reducer function to handle state transitions based on dispatched actions. The component maintains two state variables, count and showText, initialized to 0 and true, respectively. On clicking the button, it dispatches INCREMENT to increase the count and TOGGLE_TEXT to toggle the visibility of a text paragraph. The useReducer hook provides a structured approach to state management, making it suitable for handling multiple related state variables and complex state logic.

useEffect, useRef and useCallback with 1 project

Geetika Bajpai — Sun, 23 Jun 2024 11:47:11 +0000

Password Generator

Thoughts

There is a method currently running that generates random text by default.
This method needs to execute repeatedly because any changes in the input parameters, such as length, or toggling checkboxes for numbers and characters, result in new random text being generated.
Since this method runs frequently, we should consider optimization techniques. We can leverage memoization, which is inherently supported by React hooks, to optimize these methods effectively.
The copy button should be configured to specifically target and copy only the text within the designated text box.

Don't panic read the full article you will understand and this article is written by watching videos of Sir Hitesh Choudhary in YT and reading documentation.

Create a Vite project: npm create vite@latest
Navigate to the project directory: cd my-vite-project
Install npm install -D tailwindcss autoprefixer
Install npx tailwindcss init -p
Install dependencies: npm install
Run the development server: npm run dev
Configure tailwind.config.js

Now, we gonna start with code.

Memoization with useCallback

`passwordGenerator` Function

Purpose: This function generates a random password based on the specified length and character set.
Memoization: The useCallback hook memoizes the passwordGenerator function, ensuring that it only gets recreated if any of the dependencies (length, numberAllowed, charAllowed, setPassword) change. This helps in avoiding unnecessary function re-creations and optimizes performance.

`copyPasswordToClipboard` Function

Purpose: This function copies the generated password to the clipboard.
Memoization: The useCallback hook memoizes the copyPasswordToClipboard function, ensuring it only gets recreated if the password dependency changes. This optimizes performance by preventing unnecessary re-creations of the function.

useEffect Hook

Purpose: This effect runs the passwordGenerator function whenever the dependencies (length, numberAllowed, charAllowed, passwordGenerator) change.
Dependency: The passwordGenerator function is memoized, which means the effect will only rerun when the actual logic inside the generator needs to change, optimizing the component’s rendering.

Explanation of Memoization

Why Use Memoization?: Memoization helps to avoid unnecessary recalculations or re-creations of functions, especially useful in functional components where functions might be redefined on each render.
Performance Optimization: By using useCallback, the component ensures that passwordGenerator and copyPasswordToClipboard are only recreated when their respective dependencies change. This can reduce the rendering overhead and improve the overall performance of the component.

Component Functionality

State Management: The component uses useState to manage length, numberAllowed, charAllowed, and password.
Refs: The passwordRef is used to reference the password input field for selecting and copying the password.
Event Handling: The component handles various user interactions like changing the password length, toggling the inclusion of numbers and special characters, and copying the password to the clipboard.

Overall, the use of useCallback in this component ensures that functions are only recreated when necessary, optimizing the performance by avoiding unnecessary re-renders and re-creations.

Why you need hooks and project

Geetika Bajpai — Sat, 22 Jun 2024 18:18:07 +0000

Install Vite: Open your terminal or command prompt and run the following command to create a new Vite project:

Navigate to Your Project Directory:
Change directory to your newly created project directory by using command cd.
Install Dependencies:
Once inside the project directory, install the necessary dependencies by running: npm install.
Run the Development Server:
Start the development server to see your project in action: npm run dev.

We will explore hooks by creating a project and understanding the problems we solve.

The addValue function is defined to increment the counter variable. It logs the current counter value to the console and then increments it by 1.

Understanding problem

Issues and Improvements

Like we use one variable to more places if we do these things in classic javascript it create many references like document.getElementById, document.getElementByClassname, change the text inside the button. So, in react to change in UI react provide hooks

State Management: The counter should be a stateful variable to ensure that changes are reflected in the UI. This can be achieved using the useState hook.
Reactivity: To make the component re-render on counter changes, the counter variable should be managed by React's state.

The useState hook is a function that takes an initial state as an argument and returns an array with two elements: the current state value and a function that allows you to update that value.
• useState Hook: const [counter, setCounter] = useState(0); initializes a state variable counter with an initial value of 0 and provides a function setCounter to update it.
• State Update: setCounter(counter + 1); updates the state, causing the component to re-render and display the updated counter value.

Here it is another example of useState

React Router | React Router DOM

Geetika Bajpai — Fri, 21 Jun 2024 21:33:00 +0000

What is React Router?

Traditional multi-page web apps have multiple view files for rendering different views, while modern Single Page Applications (SPAs) use component-based views. This necessitates switching components based on the URL, which is handled via routing. Although not all development requirements in React need a third-party library, routing is complex and requires a pre-developed solution for efficient app development.

React Router is the most popular and fully-featured routing library for React SPAs. It is lightweight, has an easy-to-learn API, and offers well-written documentation, making it a go-to choice for implementing routing in React apps. Now maintained by Remix, React Router benefits from active development and support.

Unlike traditional websites where routing requests are sent to the server, React Router allows SPAs to handle all routing on the frontend, eliminating the need for additional server requests for new pages. Routing enables seamless navigation between different parts of an application when a user enters a URL or interacts with elements like links or buttons, thus playing a crucial role in building responsive and user-friendly web applications.

Use Case of React Router

To create a React application using create-react-app, go to your preferred CMD and type:

The command will create a React application called router-tutorial. Once the application has been successfully created, switch to the app directory using cd router-tutorial in your code editor terminal.

To use React Router in your application, you need to install it.

run the command below:

Create ReactApp

Once your project is set up and React Router is installed as a dependency, open the src/index.js in your text editor. Import BrowserRouter from react-router-dom near the top of your file and wrap your app in a <BrowserRouter>.

Wrapping <App /> with <BrowserRouter> will apply the React Router to the components where routing is needed. That is, if you want to route in your application, you have to wrap the <App /> application with <BrowserRouter>.

BrowserRouter: For React Router to work, it has to be aware and in control of your application’s location. The <BrowserRouter> component makes that possible when you wrap the entire application within it. Wrapping the entire application with <BrowserRouter> ensures the use of routes within it.

Rendering Routes

Now that we have successfully set up React Router, to implement routing in our application, we have to render a route (that is, all the pages or components we want to navigate in our browser). To render our routes, we will set up a route for every component in our application.

Routes: Whenever we have more than one route, we wrap them up in Routes. If the application’s location changes, Routes look through all its child Route to find the best match and render that branch of UI.

Route: Route(s) are objects passed to the router creation function. Route renders a component whenever a user navigates to the component path.

This code sets up a basic React application with routing using React Router. It defines two functional components, Home and About, which display simple messages. The BrowserRouter component enables routing, and the Routes and Route components define the paths for the home and about pages. When a user navigates to the root path '/', the Home component is displayed, and when they navigate to '/about', the About component is displayed. This setup provides the structure for a single-page application (SPA) where navigation between different parts of the app is handled on the client side without full page reloads.

Multilevel routes

Another method to achieve nested routes

Nested Routes:

Parent Route (Account):The Route with path 'account' does not have an element prop, indicating it is used to group child routes.This route serves as a container for the nested routes.

Child Routes: Nested routes under 'account':
'/account/profile' renders the Profile component.
'/account/settings' renders the Settings component.

Dynamic Route

The e-commerce site uses dynamic routing to handle different categories and specific products. Similar to user-based content sites like blogs or social media, each route has a common structure but displays different content based on the URL parameters. This approach helps in organizing and displaying content efficiently, making the site easy to navigate and manage. This is what's known as dynamic pages and routes.

useParams hook is used to access the URL parameters. In this case, it captures the userName parameter from the URL.

It defines a route with a dynamic segment (:userName), captures the parameter using the useParams hook, and uses it within a component to display personalized content. This approach is useful for scenarios where the content or component behavior needs to change based on URL parameters, such as user profiles, product details, or other similar dynamic pages.

Now let's go ahead and add in our API call.

Home Component

State Management: Uses the useState hook to store the list of posts.
Data Fetching: The useEffect hook fetches data from jsonplaceholder.typicode.com/posts when the component mounts and sets the posts state.
Rendering Posts: Maps over the posts array to create a list of links (NavLink) that navigate to a detailed view of each post. The to prop of NavLink uses a dynamic URL (/post/${post.id}).

PostPage Component

useParams: Retrieves the postId from the URL.
State Management: Uses the useState hook to store the fetched post data.
Data Fetching: The useEffect hook fetches data for the specific post ID (params.postId) whenever params.postId changes.
Conditional Rendering: Displays a loading message until the data is fetched and then displays the post’s title and body.

Summary

Home Component: Fetches and displays a list of posts. Each post is a link that navigates to a detailed view of the post.
PostPage Component: Fetches and displays details of a specific post based on the postId URL parameter.
React Router: Handles navigation between the home page and the post detail page.

React Lifecycle Methods Using Class & Functional Components

Geetika Bajpai — Fri, 21 Jun 2024 14:56:36 +0000

Components in React serve as the fundamental building blocks of an application. Essentially, a React component returns a JSX element that is rendered in the user interface. Additionally, a component can encompass other features such as state management, properties (props), and lifecycle methods.

React categorizes components into two main types:

Functional components: These are JavaScript functions that return JSX elements. Initially, they were stateless components, lacking support for managing state. However, with the introduction of React hooks in version 16.8, functional components gained the ability to declare and manage state, transforming them into stateful components.

In the above code, SayHello is a functional component and it is returning a JSX element. In the end, the SayHello function is being exported. Basically, SayHello is nothing but a plain JavaScript function.

Class components: These are JavaScript classes extended to React.Component. They require a mandatory render() method that returns a JSX element. Historically, React heavily relied on class components because only they supported local state management ("state").

The above class component is the equivalent of the earlier functional component. It is easily observable that the functional component is more easily readable than the class component. Moreover, it is easier to work with functional components because writing class components is more complex and complicated.

Class Component

These are mounting, updating, and unmounting. The lifecycle methods are very useful because sometimes, we may want to execute a piece of code at a specific time. For example, suppose we want to call an API just after the component is mounted. In such a case, we can use the componentDidMount lifecycle method.

Mounting phase with componentDidMount

This is the first stage of a React component’s lifecycle where the component is created and inserted into the DOM.The componentDidMount lifecycle method executes once after initial rendering. If an empty dependency array is provided as the second argument, the callback function executes only after initial rendering.

Analyze variables before loading using the constructor.

1.Constructor (constructor()):The constructor() method is a special method for initializing state (this.state) and binding event handler methods. In this code, super() is called to invoke the constructor of the parent Component class (from which App extends). Then, this.state is initialized with an object containing count: 0.

2.Component Did Mount (componentDidMount()):componentDidMount() is a lifecycle method that is called immediately after a component is mounted (i.e., inserted into the DOM tree). In this code, it logs a message to the console indicating that the component has rendered for the first time. This is useful for performing actions that require DOM nodes or initial state setup.

3.Increment Method (increment()):increment() is a custom method defined within the App class. When called, it updates the component's state using this.setState(). In React, setState() is used to update state values asynchronously. Here, it increments the count state by 1 each time the button is clicked.

4.Component Will Unmount (componentWillUnmount()):This lifecycle method is called just before the component is removed from the DOM. It's useful for cleanup activities such as cancelling network requests, removing event listeners, or cleaning up subscriptions. Here, it logs a message indicating that the component is being removed.

5.Render Method (render()):The render() method is a required method in every React component class. It returns JSX (JavaScript XML) that defines the UI of the component. In this code, it renders a <div> containing an <h1> element displaying the current value of this.state.count and a <button> element that calls this.increment() when clicked.

Binding Methods:
•Method 1:Arrow Function in Render Method (onClick={() => { this.increment() }}):This approach creates a new function instance every time the component renders. While straightforward, this can lead to performance implications, especially in larger applications.

•Method 2:Binding in Constructor (onClick={this.increment.bind(this)}):
This approach binds this.increment() to the current instance of App in the constructor. It ensures that this refers to the component instance when increment() is called, avoiding the need for creating new function instances on each render.

Lifecycle Summary:
•Mounting Phase:During the mounting phase, React calls the constructor() first, initializing state. Then, render() is called, returning JSX to render the component's UI. Finally, componentDidMount() is invoked after the component is rendered for the first time, where initialization tasks, API calls, or subscriptions can be performed.

•State Management:this.state allows components to manage their own state. Updates to state using this.setState() trigger re-rendering of the component, ensuring UI remains synchronized with data changes.

Updating phase with componentDidUpdate

This updating stage occurs after the component has mounted and rendered into the DOM. A React component updates when there is a change in its props or state. The componentDidUpdate lifecycle method is invoked after the component updates. This method can be used to compare if a specific prop or state has changed.

Component Did Update (componentDidUpdate(prevProps, prevState)):
componentDidUpdate() is a lifecycle method invoked immediately after a component updates and after render() is called. It receives two arguments:
o prevProps: Represents the previous props before the update.
o prevState: Represents the previous state before the update.
if (prevProps.number !== this.props.number) { console.log("Component Updated"); }: Compares the current number prop (this.props.number) with its previous value (prevProps.number). If they differ, it logs "Component Updated" to indicate that the component has been updated due to a change in props.

Updating Phase:
• During the updating phase, React compares the previous props and state with the current props and state to determine if the component needs to re-render. componentDidUpdate() is called after this comparison and rendering process.
• It is typically used for operations that need to be performed after a component updates, such as fetching new data based on props changes or interacting with the DOM.

Now, let's see how this can be achieved in a functional component.

The useEffect hook is used to perform side effects in functional components. It takes two arguments: a callback function and a dependency array. The callback function executes based on the presence and values in the dependency array. This is how lifecycle method-like functionality is achieved in functional components.

• Cleanup Function: The function returned from the useEffect hook is the cleanup function. It runs when the component is unmounted or before the effect is re-executed due to dependency changes. Here, it logs "Functional Component: Removed" to the console.

• Dependency Array: The second argument to useEffect is the dependency array. This array specifies the dependencies that the effect depends on. If any value in this array changes, the effect will re-run. In this case, [number] indicates that the effect should re-run whenever the number prop changes.

Lifecycle Summary in the Context of useEffect:

• Mounting Phase: When the Counter1 component is first rendered, useEffect runs and logs "Functional Component: Updating..." to the console.

• Updating Phase: Whenever the number prop changes, useEffect runs again. Before running the effect function, React calls the cleanup function from the previous effect, logging "Functional Component: Removed" and then logs "Functional Component: Updating..." again.

• Unmounting Phase: When the Counter1 component is removed from the DOM, the cleanup function from the last effect run is called, logging "Functional Component: Removed" to the console.

State in functional components

Initially, it was not possible to use state in functional components because the setState() method was only supported in class components. However, with the introduction of React hooks, it is now possible to use state in functional components.

The state of a component in React is a plain JavaScript object that controls the behavior of the component. A change in state triggers a re-render of the component.

There are two main React hooks used to declare and manipulate the state in a functional component:

useState
useReducer

The Counter functional component in React uses the useState hook to manage a count state variable. The useState(0) hook initializes count to 0 and provides a setCounter function to update it. The component returns a fragment containing two buttons and an <h2> element. The first button increments the count by 1, and the second button decrements the count by 1, both using the setCounter function. The current count value is displayed inside the <h2> element. This demonstrates how to handle state and update it in response to user actions using the useState hook in a functional component.

The useReducer hook is used for complex state management. When the state is interdependent, the useReducer hook is preferred over the useState hook. To understand useReducer, one should know what a reducer is and how to use it.

A reducer is essentially a pure function that takes the current state and an action as arguments and returns a new state.

It is very similar to the useState hook but instead of creating a function to update the state, the useReducer hook creates a function for dispatching actions. The useReducer hook has two arguments - reducer and an initialState. There is a third optional argument for initializing the state lazily.

Following is the syntax of the useReducer hook.