DEV Community: Shaan Alam

Understanding JavaScript Closures!

Shaan Alam — Tue, 12 Sep 2023 14:47:07 +0000

You might've heard about closures in JavaScript, but you don't actually know what it is or why it is used. In this blog I'll give details about closures that you need to know.

What are closures?

As per the MDN docs,

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)

In other words, a closure gives you access the outer function's variables inside the inner function. Closures are created every time a function is created. Let's take a look at an example

function sayHello(name) {
    return function displayMessage() {
        console.log(`Hello ${name}`)
    }
}

const sayHelloToJohn = sayHello('John Doe');
sayHelloToJohn(); // Hello John Doe

In the above example, I've created a function sayHello which takes a parameter name. This function returns another function which log the name(from outer function) to the console.

So, What happens is that when we call the sayHello function, the inner function is returned and assigned to sayHelloToJohn and when we call this function, Hello John Doe is logged onto the console.

But, you might be asking yourself that isn't the validity of local variables inside function expires once the function is finished executing? So, how come this inner function lets you access the local variable of it's parent function?

The reason is functions in JavaScript form closures. A closure is a combination of function and lexical environment within which the function was created. This lexical environment consists of any local variables that were present at the time the closure was created.

In this case, sayHello is a reference to the instance of the function displayMessage that is created when sayHello runs. This instance of displayMessage maintain a reference to its lexical environment within which the variable name exists. For this reason, when the inner function is called the variable name is available for use

That's what closures is all about in JavaScript!

Another example

Let's take a practical example to understand it better.

function changeColor(color) {
    return function() {
        document.getElementById('btn').style.backgroundColor = color;
    }
}

const changeColorToBlue = changeColor('blue');
const changeColorToRed = changeColor('red');

In this example, we create a changeColor function that accepts a color parameter and returns a function which changes the background color of the button.

changeColorToBlue and changeColorToRed are now functions which when invoked will change the background color of the button to the respective argument passed to the changeColor function.

Private methods with closures

Closures can help you to actually emulate private methods. This could help in restricting access to variables or methods.
The following example below demonstrates how public function access private members.

const createCounter = function (initialValue) {

  let counterVar = 0;

  function increment() {
    counterVar = counterVar + 1;
  }

  function decrement() {
    counterVar = counterVar - 1;
  }

  function getCounter() {
    return counterVar;
  }

  return { increment, decrement, getCounter };
};

const counter = createCounter(0);
console.log(counter.getCounter()); // 0
counter.increment();
counter.increment();

console.log(counter.getCounter()); // 2

counter.decrement();
console.log(counter.getCounter()); // 1

Conclusion

That's all about closures in short. In case you want to dig deeper, you can also refer to the MDN Docs

My Socials

Twitter - shaancodes

Instagram - shaancodes

GitHub - shaancodes

🖊 I am building a pastebin alternative!

Shaan Alam — Mon, 11 Sep 2023 05:17:48 +0000

Hi.
I wanted to learn T3 stack as it is trend right now. So what better way is there to learn a particular stack than actually creating a project in it. But, I did not wanted to create the traditional recipe app, social media app or a boring e-commerce app. I wanted to create something which can be used by others also.

So, I thought to myself what are the apps which I use, but it could've been better if I built it. I thought of lot of apps, but later came across pastebin. I thought to myself, "I could build it better".

Is it a regular pastebin clone?

No, it's not exactly a pastebin clone, but rather I'm planning it to build it as an alternative to it. It's going to be better, with beautiful UI and everything.

How is it going to be different?

The difference is I am gonna let users write notion like documents and then share it, unlike pastebin which only lets us share text. For writing documents, I'm gonna use Novel.sh. It is a WYSIWYG editor which provides interface and features similar to Notion. It also lets us use OpenAI API to integrate AI into it.

It will have all the regular features like document sharing, password protection, document exposure, document expiration etc. For now, I'm planning to build a MVP in a week or so, and later I'll improve it by introducing more features into it.

What tech stack I'm planning to use?

T3 stack
Novel.sh (WYSIWYG editor)
shadcn/ui
MySql
PlanetScale
Vercel

I am bad at naming things 😁, I had hard time thinking about a name for this project. I came up with "docshare", but I think it can be further improved. I'd appreciate it if you guys can help me come up with a perfect name for this project. Thanks in advance!

My Socials

https://usehooks-ts.com/react-hook/use-debounce

Optimizing User Experience with useDebounce() Hook

Shaan Alam — Sat, 01 Jul 2023 05:23:12 +0000

Optimizing User experience is one of the key elements in Web Development. One aspect of improving the user experience is debouncing

What is debouncing?

Debouncing in simple terms is just delaying a function to make sure that it doesn’t get called too often which can lead to performance issues. You might wanna ask, why’d we want to delay the function?

Nice Question!

The answer is what if the function uses heavy resources in our software? We cannot afford it to get called too often. For example, if the function is calling an API we wouldn’t wanna call it too many times.

Real world Example

Suppose we are creating a live search features where whenever user types the name of a product, the list updates in real-time. Now, let’s suppose for every key stroke that user makes an API is getting called.

Suppose the user is searching for MacBook Air . In this case 11 subsequent API requests (for each character) will be made to the server, which can increase server load and cause performance issues.

Solution

The Solution is debouncing the function. Which means that we will add a delay to the function to make sure the user has finished typing. And if the user types again we will just cancel the previous call and call the function again when the user finishes.

In this tutorial we’re gonna create a useDebounce() hook for this purpose.



import { useEffect, useState } from 'react'

export function useDebounce<T>(value: T, delay?: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)

    return () => {
      clearTimeout(timer)
    }
  }, [value, delay])

  return debouncedValue
}

Now, let's dive deeper into the live search example we've discussed earlier. As mentioned before, the hook will update the value of debouncedValue state every delay milliseconds. This means that every time the user types a character, the hook waits for delay milliseconds before updating the debouncedValue. If during that duration the value passed is changed, the previous timeout is cleared and a new timeout is set. This ensures that the hook only returns the final value after the user has stopped typing for at least delay milliseconds. Once the timeout is over, the debouncedValue is changed to the final value. This way, we can avoid unnecessary API calls or other expensive operations that would slow down the user interface.

Usage of the hook



export default function Component() {

  const [value, setValue] = useState<string>('')

  const debouncedValue = useDebounce<string>(value, 500)

const handleChange = (event: ChangeEvent<HTMLInputElement>) => {

    setValue(event.target.value)

  }

// Fetch API (optional)

  useEffect(() => {

    // Do fetch here...

    // Triggers when "debouncedValue" changes

  }, [debouncedValue])

return (

    <div>

      <p>Value real-time: {value}</p>

      <p>Debounced value: {debouncedValue}</p>

  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="p">=</span><span class="s">"text"</span> <span class="na">value</span><span class="p">=</span><span class="si">{</span><span class="nx">value</span><span class="si">}</span> <span class="na">onChange</span><span class="p">=</span><span class="si">{</span><span class="nx">handleChange</span><span class="si">}</span> <span class="p">/&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>



)

}

Resources

Conclusion

I hope you enjoyed this tutorial. If you think I made a mistake somewhere let me know in the comment section.

My Socials

A brief intro about loaders in react router

Shaan Alam — Wed, 28 Jun 2023 08:04:07 +0000

Hi. In the ever-evolving field of web-development, user experience is the top priority. As our web app grows more complex and data-intensive, we face challenges of efficiently handling and loading data to ensure seamless user experience.

A few days back I was working on a personal project, where I need to fetch data from the back-end based on different routes in my React App. I wanted to basically render each note on a different route. So I created dynamic routes. The routes was created with the note's unique ID. Suppose a note has ID 1, to it will be rendered on /notes/1 route.

My First approach was to create a Note component and then obtain the unique ID from the params. And then I could use this ID to fetch the data from my server. This approach had me encounter several problems.

Problems faced

Inefficient data loading: Without proper handling, & fetching data for dynamic route can lead to multiple server requests which are unnecessary. This in turn can increase the server load.
Data inconsistency: As I was navigating between different routes, the data related to each route was not updated properly.
Inefficiency in handling state managment: Managing the loading state and displaying the approprite UI was complex in this case because I was dealing with multiple dynamic routes simultaneously.

Solution

After researching, I cam across data loaders in react-router-dom. After reading docs, I came to understand about data loaders and how they are useful in this particular scenario. In this blog I will teach you what are data loaders and how they work in react-router!3

What are loaders?

Loaders are just functions which are used to handle the loading of the data while you are navigating between the pages of the website. Imagine you are browsing a website. When you browse to a new page, a loader or spinner is displayed to show that the data is being fetched until the new page loads. Loaders in react router work similarly.

What are we going to build.

We're gonna build a simple project where will dispplay the posts (fetched from an API) on a page. And each post will have it's own route and will be displayed there. It's going to look something like this -

Let's Code!

Creating React App and installing react-router-dom



npx create-react-app loader-example
cd loader-example
npm install loader-example

Basic Setup

We willl be building simple components to fetch data from an API and show it in the UI. We will create three routes home, /posts, /posts/:idinside the parent route /



import {
  createBrowserRouter,
  createRoutesFromElements,
  Outlet
} from "react-router-dom";

const Layout = () => {
  return (
    <>
      <Link to="/home">Home</Link>
      <Link to="/posts">Posts</Link>
      <div>
        <Outlet />
      </div>
    </>
  );
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index path="/home" element={<Home />} />
      <Route path="/posts" element={<Posts />}></Route>
      <Route path="/posts/:id" element={<Post />} />
    </Route>
  )
);

First, we will create Browser Router by creating routes inside it using the createBrowserRouter and createRoutesFromElements functions like this.

Just creating the router won't help, we have to pass this router inside the RouterProvider component inside the App Component.



import {
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index path="/home" element={<Home />} />
      <Route path="/posts" element={<Posts />}></Route>
      <Route path="/posts/:id" element={<Post />} />
    </Route>
  )
);

const App = () => {
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
};

export default App;

Building the components

Now we just have to build the Home and Posts component.



// Home.js
const Home = () => {
  return (
    <div>
      <p>Home page</p>
    </div>
  )
}

export default Home;



const api = "https://jsonplaceholder.typicode.com/posts";

const Posts = () => {
  // Posts Component
};

export default Data;

export const dataLoader = async () => {
  const res = await fetch(api);
  const jsonResult = await res.json();

  return jsonResult;
};

In the Posts component, we will also create a data loader function and export it. In this function we will actually fetch the results from an external API and return it. Later, we will use this function in App.js to mention the loader in the routes.

The loader will fetch the result just before the Posts component renders on the screen, so that it has the necessary data to show in the UI.

Now, let's complete the Posts component.



import { useLoaderData, useNavigation, Link } from "react-router-dom";

const api = "https://jsonplaceholder.typicode.com/posts";

const Data = () => {
  const result = useLoaderData();
  const navigation = useNavigation();

  if (navigation.state === "loading") {
    return <h1>Loading!</h1>;
  }

  return (
    <div>
      {result.map((res) => (
        <div key={res.id}>
          <Link to={`/posts/${res.id}`}>
            <h1>{res.title}</h1>
          </Link>
          <p>{res.body}</p>
        </div>
      ))}
    </div>
  );
};

export default Data;

export const dataLoader = async () => {
  const res = await fetch(api);
  const jsonResult = await res.json();

  return jsonResult;
};

We will use the useLoaderData() hook to get the result from the loader. Also using the useNavigation() hook, we can check the state of the loader and display some kind of spinner in the UI to tell the user that deta is being fetched in the background. However, for the sake of simplicity I just rendered a heading in the UI for this puprose.

Now, we just have to build the post component which is very simple. We just have to create a simple component which has a loader which will be used to fetch a single post from the external API. The response of the API can be used inside the component using the useLoaderData() hook.



import { useLoaderData } from "react-router-dom";

const api = "https://jsonplaceholder.typicode.com/posts";

export const postLoader = async ({ params }) => {
  const res = await fetch(`${api}/${params.id}`);
  const resJson = await res.json();

  return resJson;
};

const Post = () => {
  const result = useLoaderData();
  return (
    <div>
      <h1>
        {result.id} - {result.title}
      </h1>
    </div>
  );
};

export default Post;

Final router changes

Now we just have to do one more change in the App component. We will have to pass the loaders function we created inside the Posts and Post components in their respective routes.



const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index path="/home" element={<Home />} />
      <Route path="/posts" element={<Posts />} loader={dataLoader} />
      <Route path="/posts/:id" element={<Post />} loader={postLoader} />
    </Route>
  )
);

And now we are done!

And this is how data fetching in react-router-dom is made easy using Data Loaders.

Conclusion

I hope you enjoyed this tutorial. If you think I made a mistake somewhere let me know in the comment section.

Github Repo - https://github.com/shaan-alam/react-router-loaders-example

Live Demo - https://react-router-loaders-example.vercel.app/

My Socials