DEV Community: Saeed Niyabati

Reusable Logic in React with Custom Hooks: A Practical Guide

Saeed Niyabati — Wed, 13 Nov 2024 16:03:46 +0000

If you want to add specific logic to your component, you can write it directly within any component you like. But imagine you have some logic that you’ll need to use in multiple components. The basic approach would be to copy and paste this logic wherever it’s needed, but that's not a good idea. As a developer, you should write code once and reuse it without duplicating it over and over—this approach leads to messy, unclean code. Instead, you could write your logic as a function and call it in your components. However, in React, if your logic needs other hooks like useState, useEffect, etc., you can’t use a regular function—you’ll need a custom hook for that. So, what exactly is a custom hook? Let’s learn about it together!

What is a `Custom Hook` in React?

A custom hook is essentially a reusable function in React that starts with the prefix "use". This naming convention lets React know it’s a hook, allowing developers to add specialized functionality to their application.

So, if you have logic you’d like to reuse across different components in a React app, you can create a custom hook.

How to Create and Use a `Custom Hook` in React

To create a custom hook in React, start by writing a new file and naming it with the prefix "use" (for example, useMyCustomHook.js). Inside this file, define a function that also begins with "use", then write your custom logic within that function. Finally, export the function so it can be imported and used in any component you like.

Example:

Note: If your function doesn’t require hooks like useState, useEffect, etc., you don’t need to create a custom hook and can simply use a regular function. However, if you need to use React hooks or plan to add them later, you must use a custom hook or React component, as hooks can only be used inside custom hook or components, not in regular functions.

Thank you for reading my article! If you’d like to learn more about Next.js, React, JavaScript, and more, feel free to follow my website: saeed-niyabati.ir. Don’t hesitate to reach out with any questions. See you next time!

Boost Your React App's Performance with Memoization: Exploring useMemo, useCallback, and React.memo

Saeed Niyabati — Mon, 04 Nov 2024 17:08:08 +0000

Improving your website's performance is a critical step toward enhancing user experience and ensuring a solid, responsive interface. If you're working on a React or Next.js project with some resource-intensive components, it's natural to worry about their impact on performance. This is where memoization in React comes in—it helps speed up these 'expensive' components, leading to a smoother experience for your users.

In this article, I'll cover memoization and introduce React hooks that can optimize your app's performance, like useMemo(), useCallback(), and the React.memo Higher-Order Component (HOC). Let’s dive in!

What is Memoization in React?

Memoization is a technique used to speed up programs by caching the results of computational tasks—such as function calls—so that if the same inputs are provided again, the cached result is returned instead of re-computing it.

The `useMemo` Hook: Caching Results in React

useMemo is a hook which cache or memoize the result of function between re-rendering or updating component.

so by using this hook you can cache result of a function which is in your component and when next re-rendering your componet will use cach result if input of that function is not changed.

How to Implement `useMemo`:

useMemo is a hook that takes your unoptimized function as a callback and a list of dependencies. React then decides when to call this function either during the initial rendering or on subsequent re-renders.

Initial Rendering: During the initial render, React calls the useMemo function to calculate and store the result of the callback function you provided.
Re-rendering: On re-renders, React calls useMemo to check if the dependencies have changed. If the dependencies have not changed, React reuses the cached value stored during the last render. However, if the dependencies have changed, useMemo calls the callback function again to re-calculate and store the updated value in the cache.

Example:

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

squaredNumber is calculated only when number changes. useMemo caches this calculation, so it won’t recompute unnecessarily on every render.

The useCallback Hook: Caching Function Definitions

useCallback is a hook that caches, or memoizes, the definition of a function between component re-renders or updates.

By using this hook, you can store the definition of a function across re-renders, so React will reuse this cached version as long as the function’s dependencies haven’t changed.

How to Implement `useCallback`:

useCallback is a hook that takes a function (as a callback) and a list of dependencies. React then decides when to return (not call) this function—either during the initial rendering or on subsequent re-renders.

Initial Rendering: During the initial render, React calls useCallback to store the function you passed as a callback.
Re-rendering: On re-renders, React calls useCallback to check if the dependencies have changed. If the dependencies have not changed, React reuses the cached function stored during the last render. If the dependencies have changed, useCallback will store and return the updated function.

Example:

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

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  // Memoize the callback with `count` as a dependency
  const calculate = useCallback(() => {
    console.log("Calculating:", count * multiplier);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setMultiplier(multiplier + 1)}>Increment Multiplier</button>
      <button onClick={calculate}>Calculate</button>
    </div>
  );
};

export default MyComponent;

The `React.memo` Function: Preventing Unnecessary Re-renders

As you may know, when you have a parent component and child components, any update to the parent’s state or props will cause all its child components to re-render. In small projects, this might not be an issue, but in larger and more complex applications, unnecessary re-renders of child components can impact performance. To address this, React provides the memo() function.

The memo (or React.memo) function allows you to wrap a component to prevent it from re-rendering when the parent updates. The wrapped component will only re-render if its own props or state change.

When you first call memo() on a component, React renders and caches the component. On subsequent renders, React will use this cached version as long as the component’s props and state haven’t changed. Keep in mind that memo() only avoids re-renders for unchanged props and state—once they do change, memo() re-renders and updates the cached component accordingly.

How to Implement `React.memo`:

To implement memo in your component, simply wrap the component you want to prevent from unnecessary re-rendering with memo() or React.memo():

import React from 'react';

const MyComponent = ({ data }) => {
  return <div>{data.value}</div>;
};

export default React.memo(MyComponent);

Note:
If you pass an object as a prop to a component wrapped in memo(), the component will still re-render on every update, even if the object hasn’t changed. This happens because React uses Object.is to compare previous and current props. While Object.is(3, 3) returns true, Object.is({}, {}) returns false, since two different object references are never considered equal.

To avoid this, you can use useMemo to cache the object and keep the same reference across renders:

import React, { useMemo } from 'react';
import MyComponent from './MyComponent';

const ParentComponent = () => {
  const data = useMemo(() => ({ value: "Hello" }), []); // Cached object reference
  return <MyComponent data={data} />;
};

In this example, useMemo ensures the data object has the same reference, preventing unnecessary re-renders of MyComponent.

Understanding the 'use client' Directive in Next.js: Client-Side Components Explained

Saeed Niyabati — Thu, 24 Oct 2024 21:31:07 +0000

Hey guys, in this article, we’re going to explore why we use the 'use client' directive in the app router version of Next.js. We'll also dive into what pre-rendering is, the difference between server components and client components, and how these concepts all connect to 'use client.' By understanding these concepts, you'll be able to improve your Next.js skills. So, let’s get started with pre-rendering in Next.js!

What is Pre-rendering in Next.js?

Pre-rendering in Next.js, or generation, is a method of creating HTML for each page in advance, making it beneficial for both SEO and performance. Next.js uses pre-rendering by default, allowing for both Static Generation and Server-Side Rendering, and this method happens on the server, rather than on the client or in the browser.

What is 'use client'?

In Next.js, you can choose to pre-render your pages on the server or render them on the client in the browser. If you want your components to be generated or pre-rendered by the server, you don’t need to do anything—by default, all components run on the server in Next.js. But if you want your components to run on the client, you have to add "use client" at the top of your component. "use client" is a convention used to define client components.

Note: If you need to use hooks or handle events in your code, your component must be a client component, so you’ll need to add "use client". If you’ve already added "use client" in the parent component, you don’t need to add it again in every child component. All the child components will automatically be treated as client components.

Finally, you can read the complete articles about CSR, SSR, SSG, and ISR.

Understanding CSR in Next.js: Client-Side Rendering Explained

Saeed Niyabati — Sat, 19 Oct 2024 19:03:42 +0000

CSR (Client-Side Rendering) is a method of rendering a page on the client-side, meaning it doesn't run on the server. CSR is essentially the same as SPA (Single Page Application), so if you're familiar with what an SPA is and how it works, you already understand CSR. But if you're not sure what SPA is or how it functions, I'll explain it to you below.

In this article, I'll describe what SPA is and how it works. After that, I’ll compare it to CSR in Next.js and show you how to implement CSR in your Next.js project.

What is SPA?

An SPA (Single Page Application) consists of a single HTML page that dynamically rewrites content as needed, instead of loading a new HTML page for each interaction.

How Does MPA Work?

Before understanding SPA, you should first know about MPA. Let's learn about it:

Before SPAs became popular, websites were built using the multi-page application (MPA) approach. So how did MPAs work? Imagine you, as a developer, want to create a website with two pages: the home page ("/") and an about page ("/about"). To build this using the multipage method, you would need to create two separate HTML files for each route: main.html for "/" and about.html for "/about".

In each HTML file, you would have to write specific HTML, CSS, and JavaScript code for that page. However, some parts of the code, like the header and footer, are the same across all two pages. Even though the header and footer are identical, you, as a developer, would have to repeat them in each HTML file.

When the project is complete and deployed on a server, the server sends the complete HTML page along with all requested resources to the user. For example, when a user visits the home page for the first time, the server sends the ready main.html file, and the user can see the content immediately after a short wait. This method is good for SEO because when a search engine crawler visits your website, it can see all the content in the HTML file, as it's fully rendered beforehand.

However, when the user navigates to another page, like "/about", the process starts again. The server sends the about.html file along with all its resources (CSS, JS, etc.). The user has to wait once more for the page to load, and if their internet connection is slow, the wait is longer. What's even more inefficient is that the user must download the same code for the header and footer again, even though they haven't changed. This repetition of code (like the header and footer) is wasteful and inefficient in today’s web development practices.

How Does SPA Work?

Now that you understand how MPA (Multi-Page Application) works, let's dive into how a SPA functions.

Due to the delay in loading pages with each request, the repetition of code, and the need to rebuild the entire DOM every time, SPAs were introduced to solve these issues.

Imagine you're a developer creating a website with two routes: "/" and "/about". In an SPA framework, you only have one HTML file called index.html. Instead of creating separate HTML files for each route, you create components for each page and load them dynamically. For example, you would create three components—one for each route and import them into your index.html.

In SPAs, you can also separate reusable sections of your site (like the header and footer) into their own components. Instead of writing the same header and footer code for each page, you just import these components where needed, similar to how functions work. This reduces repetition and makes development easier.

When your SPA project is deployed to a server, the server no longer renders the content of the page. Instead, it serves the index.html file along with the JavaScript bundles that contain your components. Rendering happens client-side, in the browser.

When a user visits your site for the first time, the server sends the index.html file along with the necessary JavaScript files. This can cause a longer wait time compared to an MPA, because the entire DOM is constructed after the JavaScript is fully downloaded, parsed, and executed.

However, once the initial page is loaded, navigating between pages is much faster in an SPA. For example, if the user navigates from / to /about, the browser doesn't need to reload the entire page. Since common elements like the header and footer are already loaded, the browser only fetches the JavaScript for the specific content that changes (e.g., the /about page content). The DOM is updated dynamically without a full page refresh, making the user feel like they are interacting with an app rather than a traditional website. This provides a smoother, more "app-like" experience.

However, there’s a downside to SPAs, especially when it comes to SEO. Since the initial index.html file contains minimal content (with most of the data loaded through JavaScript), search engine crawlers may see an empty page and have difficulty indexing the content. This is why SEO in SPAs can be challenging compared to traditional MPAs.

Is CSR the Same as the SPA Method?

Yes, CSR (Client-Side Rendering) is a rendering method, meaning the process of converting components into a format that can be displayed in the browser, allowing the user to see the page. The key thing to understand is that CSR happens entirely in the browser. For both React and Next.js, CSR works the same way, there’s no difference between the two when it comes to client-side rendering.

For example, in CSR, when you visit a website for the first time, the server sends an index.html file with minimal content. But here’s the catch—this file doesn’t have the full content yet. The actual content is rendered in the browser after all the necessary component files (JavaScript, CSS, etc.) have been downloaded. Then, React builds the DOM tree (Document Object Model), followed by creating a virtual DOM, which is like a lightweight copy of the real DOM.

Once the DOM and virtual DOM are set up, the user can see the page. This process of rendering happens in the browser, converting all the components into a displayable page.

Now, when the user navigates from one page to another (say from / to /about), React builds a new virtual DOM for the new page. It compares the old virtual DOM with the new one, finds the differences, and applies those changes to the real DOM. This process of comparing and updating the DOM happens efficiently, and it all takes place in the browser.

So, to sum it up, CSR works the same way in both React and Next.js. The rendering happens in the browser, and React handles DOM updates efficiently using the virtual DOM, making the user experience smooth and fast.

How to Implement CSR in Next.js?

If you use client-side methods like useEffect in your component, instead of server-side methods such as getStaticProps or getServerSideProps, your page will be rendered on the client, following the CSR (Client-Side Rendering) method. This means the browser handles rendering after the initial HTML is loaded.

Additionally, using libraries like SWR or TanStack Query also enables CSR, as these libraries handle data fetching in the client after the page has loaded. This way, your component is rendered in the browser, and any updates to data happen seamlessly on the client side without server-side involvement.

Conclusion

CSR is a method of rendering our project in the client, and it's essentially the same as the SPA (Single Page Application) definition. React uses CSR for rendering, and this is one of the key differences between MPA (Multi-Page Applications) and SPA. Next.js also uses CSR because it's built on React, but to improve SEO and enhance user experience, Next.js has added SSG, ISR, and SSR. You can read about SSR, ISR, and SSG. If you want to stay updated with my latest articles, follow my website at https://saeed-niyabati.ir .Thank you for reading! Bye for now!

Mastering SSR in Next.js: How to Boost SEO and User Experience

Saeed Niyabati — Tue, 15 Oct 2024 15:00:39 +0000

SSR (Server-Side Rendering) is another method of generating pages in Next.js. In this article, I want to explain what SSR is, how it works, and how to implement it in both the Page Router and App Router of a Next.js project.

What is SSR?

SSR is a method of generating a static page (or pre-rendered page) after a user makes a request. This means that a static page is generated on every request. This method is useful for pages that need to be updated frequently, as it ensures the data is always fresh

How Does SSR Work?

When you use SSR in Next.js, every time a user requests a page where SSR is implemented, the page is generated after the request is made. This means the user has to wait while Next.js generates and bundles the static content again for each request. Once the static page is ready, the user can see the requested page.

It's important to note that SSR runs only on the server, and it generates a static page for each request, so it does not run during the project’s build process.

How to Implement SSR in the App Router

To implement SSR in the App Router, you don’t need to write a special function or set a specific configuration because it is enabled by default in your server components.

For example, if you have a static page and you fetch data from an API, this page will use SSR by default. It's important to note that when SSR is used, the page isn't bundled or pre-rendered at build time And if you use a dynamic page in your project, it will use SSG by default if you don't fetch any data. But when you fetch from an API, it will switch to SSR, and again, no static pages will be bundled during build time.

this is example of implementing SSR in static route :

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

export default AboutPage;

How to Implement SSR in the Page Router

To implement SSR in the page router, you need to create a getServerSideProps function in your file. This function will be called after each user request. If you're using a dynamic route, such as a [id] file, you will also need to use getServerSideProps in your file. This function takes an argument, often named context, from which you can retrieve the id, the value of the dynamic page. This function is called by the server on every user request.

this is example of implementing in tsx file :

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC<AboutProps> = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

this is example of implementing in jsx file :

const AboutPage = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

  return {
    props: {
      data,
    },
  };
}

export default AboutPage;

Conclusion

SSR is a useful method for bundling or creating static pages, but it does not happen during build time. When you need your page to be updated on each user request so that users can see the latest data, you can use SSR. However, it's important to note that it may take more time and is not as fast as other methods like SSG (Static Site Generation) or ISR (Incremental Static Regeneration) because it generates a static page for each user request.

I hope you enjoyed this article! If you have any questions, feel free to ask me. If you want to read about ISR and SSG, you can check out my articles on them here for ISR and here for SSG. If you want to learn more about everything, you can follow my website.

Thank you for reading! Bye for now!

Mastering SSG in Next.js: How to Boost SEO and User Experience

Saeed Niyabati — Sun, 13 Oct 2024 14:46:16 +0000

SSG (Static Site Generation) is a method in Next.js that's similar to ISR (Incremental Static Regeneration), but it runs only at build time. Once the site is built, SSG doesn't render the pages again until the next build. In this article, I'll dive into how SSG works in Next.js, how it improves SEO, and how it enhances the user experience.

What is SSG?

SSG is a method in Next.js that runs on the server during the build process. It generates static pages along with their CSS, JavaScript, and related resources, bundling everything together for a complete static experience.

How Does SSG Work?

To use SSG in your project, you need to export the getStaticProps method in the page where you want to use SSG. If you're using the app router, SSG runs by default when you build your project. However, if you're using the page router, you must manually add getStaticProps.

This method creates bundled static pages, so when a user or a crawler requests a page where SSG is implemented, Next.js sends a fully prepared page with all its resources. This eliminates the need to load additional assets, minimizing delays, which is great for SEO and user experience.

For dynamic routes, like a blog detail page that uses a slug or ID, you'll need another method to fetch data for that page. This method is getStaticPaths, which runs before getStaticProps during build time.

How to Implement SSG in the App Router

SSG is implemented by default in the Next.js App Router when you build your project. All of your pages will be bundled and cached in a CDN, so there's no need to add extra steps for static routes.

However, for dynamic routes, such as those using slugs or IDs, Next.js can't automatically fetch them at build time. You’ll need to get these lists from an API or some other source in your project. This is where the generateStaticParams function comes in. It allows you to fetch the list of slugs or IDs for dynamic routes and return them, so Next.js can generate static pages for each one. The important thing to remember is that generateStaticParams must be used in a server component, not a client component.

this is example of implementing in tsx file :

this is example of implementing in jsx file :

How to Implement SSG in the Page Router

To implement SSG in the Page Router, you need to create the getStaticProps function and export it from the page where you want to implement SSG. This function will be called automatically when building the project.

If you have a dynamic route, you need to create another function and export it. This function, as I mentioned before, is called before getStaticProps, and you must fetch your data from an API or get a list of IDs or slugs from a file.

this is example of implementing in tsx file :

this is example of implementing in jsx file :

Conclusion

SSG is a useful method for bundling and creating static pages. If you want to improve your website for SEO and user experience, it’s advisable to use SSG, ISR, or SSR.

In this blog, I wrote about SSG. I also have another article about ISR available at this address: Mastering ISR in Next.js. I will write another article about SSR later. Please feel free to leave a comment if you have any questions; I’m here to help. This blog may be updated later as I want to share the best knowledge with you.

Thank you for reading! If you want to read more articles, you can follow my website: Saeed Niyabati. I hope you enjoyed it. Bye for now!

Mastering ISR in Next.js: How to Boost SEO and User Experience

Saeed Niyabati — Fri, 11 Oct 2024 14:13:53 +0000

ISR is a hybrid rendering method in Next.js, which is useful for SEO and improving user experience. In this article, I will explain how ISR works in Next.js, show examples of implementing ISR in both the Page Router and the App Router, and finally, address some common questions about ISR in Next.js.

What is ISR?

ISR is a hybrid rendering method in Next.js. It regenerates static pages at specific intervals, which helps with SEO and improves the user experience by keeping content up to date without rebuilding the entire site.

How Does ISR Improve SEO and User Experience?

If you’ve used React.js or a traditional Single Page Application (SPA), you know that there is typically only one HTML file in an SPA. When a user first visits an SPA website, the SPA sends a minimal HTML file (in React, this is usually index.html). After that, it fetches CSS, JavaScript, and other resources needed for the requested page. These resources are then rendered and combined into the HTML once they reach the client (the browser). However, as mentioned earlier, the initial HTML file sent by an SPA contains little to no content.

Now, imagine a Google bot requesting the website instead of a user. While modern Google bots can execute JavaScript to retrieve content, relying solely on this can still negatively impact SEO. The bot might see the initial HTML as empty, which could delay indexing the page content, potentially harming your search rankings.

Next.js solves this by using pre-rendering techniques, such as generating static pages. We will talk about rendering in detail later, but here’s a brief overview. With pre-rendering, the HTML for each route is generated on the server and sent directly to the client. The CSS and JavaScript files are typically bundled and cached.

So, when a user or Google bot visits the site, they immediately see a fully rendered page. This improves SEO because the Google bot can instantly see the content in the HTML. It also enhances the user experience by speeding up page loads, meaning users don’t have to wait for the content to load dynamically.

How Does ISR Work?

If you want to understand better how ISR (Incremental Static Regeneration) works, let me explain with an example. Imagine you're an admin who manages a list of blogs on your website. You don't want to rebuild your project every time you post a new blog. Instead, you want your blog list page to update automatically, say, every 60 seconds. So, when you write a new blog, you want it to show up without manually rebuilding your project. This is where ISR comes in. While you could use methods like SSR (Server-Side Rendering), if you want your website to update at specific intervals, ISR is the way to go. We'll talk about SSR later.

Now, let’s say you implement ISR on your blogList page and set the revalidation time to 60 seconds. You build your project for the first time, and the revalidation timer starts. A user visits your website, goes to the blog list page, and sees the current list of blogs. Meanwhile, you publish a new blog post, but because there are still 20 seconds left in the 60-second window, new users visiting the site won’t see the new blog yet.

Once the 60 seconds are up, ISR checks for new data, sees that there’s a new blog post, and regenerates the static page with the updated content. It then caches the new version on the server. Here’s something important to note: while ISR is regenerating the page, users still see the old version until the new one is ready. So, after ISR finishes, any new visitors will see the updated page, but users who were already on the site before the revalidation will still see the old page unless they refresh it.

Another key thing to remember is that when you build your website using npm run build, the initial static page is generated by SSG (Static Site Generation), not ISR. After the first build, ISR kicks in to handle the regeneration process. Also, ISR doesn’t regenerate your entire site; it only regenerates the specific page where ISR is implemented. So, when ISR regenerates, only that specific page is updated, not the whole project.

How to Implement ISR in the App Router

To implement ISR (Incremental Static Regeneration) in the App Router, it's important to know that ISR must be used in server components, not client components. This is because ISR is a server-rendering method, not a client-side one. So, you should place ISR in files like app/blog/page.tsx or app/blog/page.jsx.

One key point to remember is that if you don't call your API in the server component where the revalidate option is set, ISR won't work. The server component must be able to fetch new data in order to regenerate the page, otherwise, no updates will occur.

To enable ISR, all you need to do is add the revalidate property to the fetch method. If you prefer using Axios instead of fetch, you can still use it by configuring the request similarly, but for now, I'll stick to using fetch. Maybe later I'll explain how to do it with Axios.

i provided example with tsx file and jsx fiel :

this is example of implementing in tsx file

this is example of implementing in jsx file :

How to Implement ISR in the Page Router?

To implement ISR in the Page Router, you must export getStaticProps from your component and add the revalidate property to this function. This function only runs on the server, so you need to make sure to call your API inside getStaticProps. As mentioned in the previous section, you can use fetch or axios to fetch your data, but keep in mind that the API call must be made inside getStaticProps, or else ISR will not work.

Again, this function is executed on the server, not the client. Here’s an example to demonstrate:

this is example of implementing in tsx file :

this is example of implementing in jsx file :

Conclusion

ISR in Next.js runs after the initial build and improves both SEO and user experience.
You can create your component using other methods like SSR or SSG, but sometimes ISR is needed for specific use cases.

You need to have a good understanding of what ISR is, how it works, and how to implement it in both the Page Router and App Router. In this article, I’ve tried to explain it as clearly as possible, and I will update it later if I can explain it even better. If anything is unclear, please let me know by leaving a comment, and I’ll provide further clarification.

Thank you for reading this blog, and I hope you enjoyed it!

Mastering React Functional Components: Hooks, useEffect, and Lifecycle Explained

Saeed Niyabati — Fri, 11 Oct 2024 11:20:55 +0000

In React version 16.8, functional components became more powerful with the introduction of hooks.

Functional components in React existed before version 16.8, but they did not have access to lifecycle methods or state. In version 16.8, React introduced Hooks, which allowed functional components to manage state and implement lifecycle behaviors.

Components are the building blocks of a React application, and there are two ways to write them: functional and class-based. Both approaches achieve the same functionality, but many developers prefer using functional components due to their simplicity and the advantages provided by hooks, like useState and useEffect.

Look closer at the lifecycle of functional components in React

The lifecycle of a functional component refers to the stages a component goes through during its existence, from when it is created and added to the DOM — called mounting or mounted — to when the component is updated, and finally to when it is removed from the DOM, known as unmounting.

So, in a functional component in React, there are three main stages: mounting, updating, and unmounted. We handle these stages in our component by using the useEffect hook. First of all, let’s understand what useEffect is:

What is useEffect?

useEffect is a hook in React that allows us to add side effects to our components. Side effects refer to changes in state or behavior that occur as a result of running a function. These changes can include making API requests, modifying global variables, or altering the DOM.

useEffect can be triggered when props or state in a component change, and we can control when it runs by setting dependencies for it.

How can I handle useEffect?

As I mentioned, you can handle or control useEffect. For example, if you want your useEffect function to run only when the component first renders and not during state or prop changes, that’s called the mounting stage. If you want your useEffect to run only when one of your props or state changes, that’s the updating stage. Lastly, if you want your useEffect to run right before your component is removed from the DOM, that’s the unmounting stage. To manage these stages effectively, you need to understand each step. Let’s dive in

What is the mounting stage?

The mounting stage refers to when a component is created or inserted into the DOM (Document Object Model). During this stage, the component renders, the initial state values are set, and any side effects related to mounting are performed.

How can I implement mounting in useEffect?

If you want your useEffect to run when the component is created and only run once, you can add a second argument to your useEffect hook, which should be an empty array. This setup ensures that your useEffect will run only during the initial render.

Example: Imagine you need a list in your component, and you want it to be fetched for the first time when the component is created. You can add an empty array as the second argument in your useEffect to achieve this.

What is the updating stage?

The updating stage occurs when a component’s props or state are updated, resulting in the component being re-rendered. During this stage, the UI updates, and any side effects related to the updating process will run.

How can I implement updating in useEffect?

To run useEffect when a component is updated, similar to the mounting stage, you need to add an array as the second argument. However, this array should not be empty — you need to include the specific state or props that should trigger the useEffect when they are updated.

Example: Imagine you have a search state in your component that triggers when the user types in the search input. Whenever the user types a letter, you want useEffect to trigger and fetch data from an API based on the user’s search. You can implement this by using the updating stage, adding the search state as a dependency in the useEffect hook.

What is the unmounting stage?

This stage occurs when a component is cleared or removed from the DOM, allowing you to clean up resources or perform tasks to prevent memory leaks.

How can I implement unmounting in useEffect?

To implement unmounting in your component, you can return another function from your useEffect. This function is called the cleanup function, and it runs either right before the component is removed from the DOM or before the useEffect is executed again. This means the cleanup function can also run during the updating stage.

Example: Imagine you have a component that establishes a WebSocket connection or an API stream in the mount stage. To avoid unnecessary connections, you would want to clean up the connection when unmounting or when the component re-renders, as this can cause memory leaks. For this example, you should use a cleanup function to close the WebSocket or stop the API stream.

A Comprehensive Guide to CSS Positioning: Understanding the Different Types

Saeed Niyabati — Tue, 08 Oct 2024 22:20:05 +0000

When developing a website, you may need specific elements to stay in a fixed position on the page, like a navbar at the top or a modal dialog for displaying important messages. Another example could be a back-to-top button at the bottom of the page, allowing users to quickly navigate back to the top when they reach the end of the content. While these examples are quite common, they illustrate the importance of understanding the CSS position property. So, let's discuss what the position property is and how it works:

What is the Position Property in CSS??

In CSS, the position property defines an element's position within a webpage or document. It allows you to set the element's position from the left, right, top, or bottom of the page, and even control the stacking order using the z-index property. There are five primary values for the position property: static, relative, absolute, fixed, and sticky.

What is the static Property in CSS Positioning ?

The static position is the default value applied to HTML elements. When an element has a static position, it follows the normal flow of the document. In this case, properties like left, right, top, bottom, and z-index have no effect on the element's positioning, as it remains within the standard document layout.

What is the relative Property in CSS Positioning ?

The relative position, similar to the static position, keeps the element within the normal flow of the document. However, the main difference between static and relative positioning is that with relative positioning, properties such as left, top, right, bottom, and z-index can affect the element's position. As a result, you can move a relatively positioned element while it remains in the document's natural flow.

What is the absolute Property in CSS Positioning ?

The absolute position, like the relative position, allows properties such as left, top, right, bottom, and z-index to affect the element's position. However, an absolute-positioned element is removed from the normal document flow, behaving as if it doesn't occupy any space within the document layout.

An element with an absolute position is positioned relative to its closest positioned ancestor. This means that the parent element must have a position value other than the default static position. If the nearest parent element is not positioned, the absolutely positioned element will be positioned relative to the next closest positioned ancestor element. If there are no positioned ancestor elements, it will be positioned relative to the html element.

What is the fixed Property in CSS Positioning ?

Fixed position elements are similar to absolute position elements, as both are removed from the normal document flow. However, unlike absolute positioning, fixed position elements are always positioned relative to the html element. This means that fixed position elements remain in the same position on the screen, unaffected by scrolling. In other words, they stay in place even when a user scrolls through the content of the webpage

What is the sticky Property in CSS Positioning ?

Sticky position elements combine aspects of both relative and fixed positioning. Initially, they behave like relative position elements, following the normal document flow. However, once a specific scroll point is reached, the sticky element transitions to behave like a fixed element, remaining in a fixed position on the screen even as the user continues scrolling.

This unique positioning allows for certain elements to stay in view for a better user experience, such as a navigation bar that "sticks" to the top of the screen when a user scrolls down the page.

What is the z-index Property in CSS Positioning ?

The z-index is a CSS property that determines the stacking order of overlapping HTML elements. Elements with a higher z-index value will be placed on top of elements with a lower z-index value. This property is particularly useful when working with elements that have absolute, relative, or fixed positioning, as it allows you to control which element appears "on top" when they overlap. Note: z-index only affects elements with position values other than the default static position.

DEV Community: Saeed Niyabati

Reusable Logic in React with Custom Hooks: A Practical Guide

What is a Custom Hook in React?

How to Create and Use a Custom Hook in React

Boost Your React App's Performance with Memoization: Exploring useMemo, useCallback, and React.memo

What is Memoization in React?

The useMemo Hook: Caching Results in React

How to Implement useMemo:

The useCallback Hook: Caching Function Definitions

How to Implement useCallback:

The React.memo Function: Preventing Unnecessary Re-renders

How to Implement React.memo:

Understanding the 'use client' Directive in Next.js: Client-Side Components Explained

What is Pre-rendering in Next.js?

What is 'use client'?

Understanding CSR in Next.js: Client-Side Rendering Explained

What is SPA?

How Does MPA Work?

How Does SPA Work?

Is CSR the Same as the SPA Method?

How to Implement CSR in Next.js?

Conclusion

Mastering SSR in Next.js: How to Boost SEO and User Experience

What is SSR?

How Does SSR Work?

How to Implement SSR in the App Router

How to Implement SSR in the Page Router

Conclusion

Mastering SSG in Next.js: How to Boost SEO and User Experience

What is SSG?

How Does SSG Work?

How to Implement SSG in the App Router

How to Implement SSG in the Page Router

Conclusion

Mastering ISR in Next.js: How to Boost SEO and User Experience

What is ISR?

How Does ISR Improve SEO and User Experience?

How Does ISR Work?

How to Implement ISR in the App Router

How to Implement ISR in the Page Router?

Conclusion

Mastering React Functional Components: Hooks, useEffect, and Lifecycle Explained

Look closer at the lifecycle of functional components in React

What is useEffect?

How can I handle useEffect?

What is the mounting stage?

How can I implement mounting in useEffect?

What is the updating stage?

How can I implement updating in useEffect?

What is the unmounting stage?

How can I implement unmounting in useEffect?

A Comprehensive Guide to CSS Positioning: Understanding the Different Types

What is the Position Property in CSS??

What is the static Property in CSS Positioning ?

What is the relative Property in CSS Positioning ?

What is the absolute Property in CSS Positioning ?

What is the fixed Property in CSS Positioning ?

What is the sticky Property in CSS Positioning ?

What is the z-index Property in CSS Positioning ?

What is a `Custom Hook` in React?

How to Create and Use a `Custom Hook` in React

The `useMemo` Hook: Caching Results in React

How to Implement `useMemo`:

How to Implement `useCallback`:

The `React.memo` Function: Preventing Unnecessary Re-renders

How to Implement `React.memo`: