DEV Community: SREY

Rendering One Million Checkboxes Efficiently: Performance Insights using Vanilla JS🙃

SREY — Sun, 08 Sep 2024 11:21:14 +0000

Hello Beautiful People of the Internet! 🚀

I've been on a rollercoaster journey these past few months, building the MVP of my product, Talez. Amidst all the ups and downs, something cool caught my eye: the viral "One Million Checkbox" challenge that's been buzzing online. But there's more to this chaos than just a sea of checkboxes—it’s a fascinating dive into performance optimization and scalability.

I'll link to the original blog at the end so you can see how the author scaled their system for a million users. But for now, I was curious about how One Million Checkboxes would actually behave. I knew there was no way they would render smoothly without some help from those fancy tech terms... wait, what were they called again? (Pausing for effect)… Ah yes, Lazy Loading!

Let's dig into the madness and figure out how we can handle this ocean of checkboxes without losing our sanity—or our app’s performance!

Figuring it Out 🤔:

The first challenge was to figure out how to render thousands of checkboxes without crashing the browser or breaking the code. I knew about concepts like lazy loading and batch rendering, but I soon realized those alone wouldn’t be enough. As seen on One Million Checkbox, the checkboxes render on scroll, leveraging the viewport of the DOM —meaning only the checkboxes visible in the view are rendered.

A bit of research led me to the IntersectionObserver API in JavaScript. This API allows us to observe elements as they enter or exit the viewport, making it perfect for implementing lazy loading of checkboxes. By rendering only the checkboxes that come into view, we can manage performance efficiently and avoid overwhelming the browser.

💡Note :

The original site may have a little different implementation. I might try and explore different way to render checkbox UI using vanila JS, in current implementation of One Million Checkbox there is a way where only selected amount of checkboxes are rendered inside the view port if i remember correctly it is called windowing or virtualization.

Building Blocks in JS for rendering UI Checkboxes:

Let's start by setting up the basic structure using HTML. We don’t need much code here—just a simple layout to get things started. I’ve also added some CSS styles to improve the overall appearance: padding inside the

for better spacing, gaps between the checkboxes for a cleaner look, and a flex-wrap property to ensure the checkboxes stack neatly across multiple lines.

Ahoy This is all we need from out HTML code !

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>One Million Checkboxes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 10px;
        }

        #checkbox-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            /* Space between each checkbox */
        }
    </style>
</head>

<body>
    <div id="checkbox-container"></div>
    <script src="script.js"></script>
</body>

</html>

"Let’s spice up the basic structure with some Vanilla JavaScript (no pun intended!)."

As discussed earlier, we'll be leveraging the IntersectionObserver API, but before diving into it, we need to address potential rendering issues that might arise with such a large number of elements. To handle this efficiently, we'll implement batch rendering of checkboxes. This approach allows us to render checkboxes in manageable batches, gradually building up to our target of one million checkboxes without overwhelming the browser.

1.) Let's start with some dom manipulation's and some declaring global variables first

const container = document.getElementById("checkbox-container");

const checkboxCount = 1000000; // total number of checkboxes we need to render
const batchSize = 1000; // Number of checkboxes to render at once
let lastRenderedIndex = 0; // track for us when we use observer api

The last rendered index refers to the position of the last checkbox that was rendered within the current viewport. As we scroll, we'll dynamically add a new batch of checkboxes based on this index, incrementally increasing the rendered count. We’ll use the IntersectionObserver API to unobserve the previously rendered elements and observe the latest ones.

2.) Now lets implement the batch-rendering function


function createCheckboxesBatch(startIndex, endIndex) {
  const fragment = document.createDocumentFragment();

  for (let i = startIndex; i < endIndex; i++) {
    const checkboxItem = document.createElement("div");
    checkboxItem.className = "checkbox-item";

    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = `checkbox-${i}`;
    checkbox.name = `checkbox-${i}`;

    checkboxItem.appendChild(checkbox);
    fragment.appendChild(checkboxItem);
  }

  container.appendChild(fragment);
}

Here I have added the checkboxes batch function named createCheckboxesBatch which takes startIndex and an endIndex and inside the func we create a fragment from the document

Within the #checkbox-container div, we start by creating an input element for each checkbox. We set the type attribute to "checkbox" to define it as a checkbox input. Additionally, we assign each checkbox a unique id and name based on its current index number. This approach helps in debugging by making it easy to identify each checkbox by its corresponding index.

and then now we append the checkbox to the checkboxItem to checkbox and than assigning the fragment to the container.

Are you thinking wth createDocumentFragment does in JS DOM?

We create a new empty DocumentFragment, which allows us to build an offscreen DOM tree where DOM nodes can be added without affecting the main document. This fragment is not part of the actual DOM until it's appended, at which point it is replaced by all its child nodes in the DOM tree. This approach improves performance by minimizing reflows and repaints. For more details, you can check the documentation on MDN.

3.) But let move forward where we can actually write the next set of code lines where we write a function checking do we need to load more checkboxes and if yes we ideally change the lastRenderedIndex with the batchSize.

function loadMoreCheckboxes() {
  if (lastRenderedIndex < checkboxCount) {
    createCheckboxesBatch(
      lastRenderedIndex,
      Math.min(lastRenderedIndex + batchSize, checkboxCount)
    );
    lastRenderedIndex += batchSize;
  }
}

4.) Now we shall add the Observer API logic which we intend to implement before

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        loadMoreCheckboxes();
        observer.unobserve(entry.target);
        // Observe the last child again after loading more checkboxes
        if (lastRenderedIndex < checkboxCount) {
          observer.observe(container.lastElementChild);
        }
      }
    });
  },
  {
    rootMargin: "100px", // Load more checkboxes just before reaching the end of the container
  }
);

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport

Code Break Down :/

👺 Creating the IntersectionObserver:

We start by creating an IntersectionObserver instance, passing it a callback function that runs whenever observed elements enter or exit the viewport. The callback function receives a list of entries, which represent the observed elements and their intersection status with the viewport.

👺 Processing Each Entry:

For each entry in entries, we check if it is intersecting (i.e., visible within the specified viewport). If entry.isIntersecting is true, it means the element is in view or close enough based on the root margin.
When an entry intersects, we call loadMoreCheckboxes(), a function implemented to add a new batch of checkboxes to our container.

👺 Managing Observations:

After loading more checkboxes, we use observer.unobserve(entry.target) to stop observing the current entry, which prevents repeated calls as the user continues scrolling.

To keep the process going, we then observe the last newly added checkbox using observer.observe(container.lastElementChild). This step ensures that as soon as the last checkbox in the current batch comes into view, more checkboxes are loaded, creating a seamless user experience.

👺 Root Margin:

The observer is configured with a rootMargin of "100px", which acts as a buffer zone around the viewport. This means the observer will trigger loadMoreCheckboxes() 100 pixels before the target element actually enters the viewport, ensuring that new checkboxes are loaded just in time to avoid any visible gaps or delays in rendering.

And lastly add the function for observing the last child when the user lands on the page for the first time ever and we start observing lastElement by observer.observe(container.lastElementChild)

// Start by observing the last child
createCheckboxesBatch(0, batchSize);
lastRenderedIndex += batchSize;
observer.observe(container.lastElementChild);

I have curated a JAM link where I added a console with the last rendered index here is the link https://jam.dev/c/623545b7-000b-4318-85bb-4064a723c8d2

So let us run throught the intrusive thoughts of performance with the contributor who used virtual DOM versus when we used IntersectionObserver API.

Windowing, Efficiently renders only the visible portion of large lists, reducing the number of DOM elements and improving performance significantly. Ideal for uniform lists where the size of items is predictable, like tables or grids. But it does Struggles with dynamic or varying content heights, requiring additional logic to handle discrepancies. Less suited for complex interactions or elements outside of simple scrollable views.

In contrast, the IntersectionObserver API offers superior performance for large datasets by rendering only visible elements, thus reducing memory usage and enhancing responsiveness with on-demand loading. However, it is less effective for handling frequent updates or complex interactions.

Here is the blog to the original author's blogpost:
https://eieio.games/nonsense/game-14-one-million-checkboxes/

Thank you for reading. It’s been great exploring these concepts with Vanilla JS. If you like the post drop a like and a comment if you have new way to add these one million checkbox on the UI screen. See you in the next post!

Infinite list loading 🤔, with React Query - useInfiniteQuery hook !

SREY — Tue, 09 Jul 2024 03:18:11 +0000

Sometimes getting all the data in a single API query is worth than getting it in the form of paginated data, but not in every case what if you need the API to be more optimized and efficient hence implementing a infinite loading kind of a feature from scratch might not only be complicated but also overwhelming if you are just a beginner in React, Let's see how react-query makes it possible with the help of infinite queries.

Hello I am SHREY, your author and the guide to put you up on a step closer on mastering react-query with implementing infinite loading list feature from scratch with the help of react-query.

So now if we see, for example real world application like Dribble , we may find a Browse More Inspiration kind of a button at the bottom of the screen after some amount of web mockups are displayed, so on clicking that button we may find more amount of data displayed again and the cycle continues.

So one way is we give a button and on the click of it we may find a set of data thrown at the client from the server or otherwise we could make the use of infinite queries with the help of scroll in that case we may need to use react-intersection-observer to get new data based on the viewport and scroll trigger.

Lets build the feature with a button saying load more data, without furthure ado 😅.

So Let us define how we could get the data from the backend, for example different api handles pagination differently, in my case I have limit and offset kind of a thing where developer from frontend handles limit of data they want with the help of offset, so my response structure from backend would be somewhat like the below example stated:



{
  "feedbacks": {
    "totalPages": 1,
    "feedbacks": [
      {
        "_id": "6624d529440d8153b9967515",
        "feedback": "Hehe cool think to do",
        "feedback_author_id": "6621e2621755214cca2e300b",
        "feedback_author_name": "test1",
        "tale_id": "65f6bbd6feec14b3e8804846",
        "created_at": "2024-04-21T08:58:17.963Z",
        "__v": 0
      },
      {
        "_id": "662afb1caca2a90e470bc78f",
        "feedback": "sddsdsdd",
        "feedback_author_id": "65b38594f8211ed0962fe067",
        "feedback_author_name": "shrey",
        "tale_id": "65f6bbd6feec14b3e8804846",
        "created_at": "2024-04-26T00:53:48.653Z",
        "__v": 0
      },
      {
        "_id": "662afb34aca2a90e470bc79c",
        "feedback": "xoxo",
        "feedback_author_id": "65b38594f8211ed0962fe067",
        "feedback_author_name": "shrey",
        "tale_id": "65f6bbd6feec14b3e8804846",
        "created_at": "2024-04-26T00:54:12.671Z",
        "__v": 0
      }
    ]
  }
}

Now I will be having a backend api endpoint in somewhat this fashion where user can attach limit and offset in the form of query params



http://localhost:3000/v1/feedback/get-feedbacks?taleId=123&offset=12&limit=6

Okay so my only point of stating this was to get easily think how our hasNextPage params work in frontend when we try to apply it using inifite queries.

lets see how we need to handle react-query hook called useInfiniteQuery



 const fetchFeedbacks = ({ pageParam = 0 }) => {
    return getFeedbacks({ taleId: params.taleId, offset: pageParam });
  };

 const query = useInfiniteQuery({
    queryKey: ["get-feedbacks", params?.taleId],
    queryFn: fetchFeedbacks,
    initialPageParam: 0,
    getNextPageParam: (lastPage, lastPageParam) => {
      if (lastPage.data.feedbacks.feedbacks.length === 0) {
        return undefined;
      }
      return lastPageParam.length * LIMIT;
    },
    enabled: !!params?.taleId,
  });

In this above piece of code we have assigned our values returning from the useInfinteQuery to a variable where we already have known in our previous blogs about the queryKey , queryFn etc but here we see initalPageParam, this is a parameter required by default when using this hook which helps in fetching the first page we set it to 0 and hence this will get us the first page data from the backend server. Hence when the api endpoints get fired the offset in the api endpoint tends to be 0 and the data actually is fetch from the 0th index or in layman terms we say page.

getNextPageParam is a callable function which return a single variable in the docs it is described something like this:

When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages, as well as pageParam information.

so how did I used getNextPageParam is similar to what written above, this means lastPage with the data returned by the API endpoint *if having length === 0 than I will return undefined stating that there is no more data that can be sent back to client from the server * otherwise I will be returning the next page param which will get us the data from the backend server lastPageParam.length * LIMIT, I have also added how I would get the lastPageParam and what I will be returning , offset is what will be returned by lastPageParam.length * LIMIT.

and you already know what enabled is and how do we already use it and why we use it. If you are not familiar to the enabled keyword you know the drill => get to my previous blogs and dig the docs to find out what enabled does.

There are also other set of parameter where you could use it with useInfiniteQuery such as getPreviousPageParam and maxPages you could dig a deeper view it on the react-query docs but getPreviousPages does the similar thing as getNextPageParams but it takes firstPage, allPages, firstPageParam, allPageParams firstPage and firstPage params while maxPages is the number of pages to be stored in the infinite query data.

This is how it will display it, I have recorded a prime use case from one of my product that i am gonna make it enable to use for the new users for
brainstorming and creating story boards for the application soon.

https://jam.dev/c/0b3c18fd-d250-4bc5-96fb-69d01ce7f915

This was all for now, I know I am not curating a blog every week like the way I used to curate before, but I will try my best. Also lets not forget to like and share the blog with others and comment any good or optimized way to handle the react query useInfiniteQuery hook I would love to know your feedbacks as well,

btw Hello once again I am SHREY, Part-time SDE at Talez (hacking on my product) otherwise I do a full time Software Development at an early scale start-up if you reached till here reading the blog do follow me and yeah have a happy working week Bye:)

SQL Querying Made Simple with GraphQL and Prisma !

SREY — Mon, 01 Apr 2024 05:48:11 +0000

Hola Amigos

In todays blog we will see how we can built a sql querying mechanism using prisma and graphQL , We will be using GraphQL using the Apollo Client and a graphQL server inference using express.

Tech stacks used here are :
GraphQL , Prisma PgSql dump , Express (inferencing the GraphQL backend Server).

If you want your graphQL queries, communicating with our backend interface we just might need to do something I am doing below in React this is just a configuration part which I would like to show technically, that how could we configure graphQL on the frontend part.

const client = new ApolloClient({
  uri: import.meta.env.VITE_APP_GRAPHQL_API,
  cache: new InMemoryCache(),
});

Then we will use it like this wrapping up the App Component as we will be using the client across the whole application.

 <ApolloProvider client={client}>
  <App />
 </ApolloProvider>

The above code have to be written inside the main.tsx file or inside the index.ts file if using cra , where the root is render inside the ReactDom. The above code creates the client , with the help of apollo-client library use to create a client for using GraphQL it takes two parameters the uri which is nothing but the backend inference of the GraphQL API and a cache parameter where we have defined InMemoryCache() where the apollo client responds immediately if have stored the queries inside the local cache storage without the network request.

Now we need to Focus towards the Express where we will be inferencing the GraphQL server for mutating and fetching the data from our post-gres data dump

Lets start with the Setup in backend for GraphQL followed by Prisma

Here we don't see much of the configuration to be set up but only the Apollo Server to serve the client request, our main focus here would be to make resolver function and schema files accurately and precisely as it may be quite messy sometimes when the product code base get's quite huge.

in my ./index.js

const server = new ApolloServer({
  schema,                        // you executable schema file
  context: ({ req }) => ({
    db,                         // your database connection
  }),
  plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
});

await server.start();

In my case I am using Postgres Databse Dump so I will be using pg-promise to make a database instance and make a connection string.Also I have attached how we will be using it from .env file as if some newbie reads the blog they might get a sense how a production / industry application needs to developed 🗿.

const pgp = pgPromise();
export const db = pgp({
  connectionString: `postgres://${process.env.DB_USER}:${process.env.DB_PASSWORD}@${process.env.DB_HOST}:${process.env.DB_PORT}/${process.env.DB_DATABASE}`,
});

Now Lets get towards the executable schema files and give it to apollo server

import makeExecutableSchema from "graphql-tools" // also add it into the file

const schema = makeExecutableSchema({ typeDefs, resolvers });

So what are typeDef and resolvers ?

TypeDefs are nothing but a schema file where the datatype of the field mentioned, something similar to the types in typescript , I will add some of it how do we mentioned in the file and also some scalar types how do we manage some scalar types and how do we create some custom typedef using GraphQLScalarTypes. Also linking a document from ApolloGraphQL for making schema more better and sound.

also in my ./schema.js

Let us assume I am making something like user_secrets having my DB entites in following manner

 type sus_users_talez{
        id: Int!,
        created_at: TimestampWithTimezone!,
        updated_at: TimestampWithTimezone,
        deleted_at: TimestampWithTimezone,
        name: String,
        sus_created_at: TimestampWithTimezone,
        sus_updated_at: TimestampWithTimezone,
        visibility: String,
        workflows: [String],

    }

Here you can see I have TimeStampWithTimeZone which is a custom typeDef, we will create this in a miniute

But before that , I want to show how will we make a Schema File more good the above was just an example of type

export const typeDefs = `#graphql
    scalar TimestampWithTimezone
    scalar JSON

 type sus_users_talez{
        id: Int!,
        created_at: TimestampWithTimezone!,
        updated_at: TimestampWithTimezone,
        deleted_at: TimestampWithTimezone,
        name: String,
        sus_created_at: TimestampWithTimezone,
        sus_updated_at: TimestampWithTimezone,
        visibility: String,
        workflows: [String],


    }


// this typedef will be responsible for Querying (Remember useQuery in ApolloGraphQL for fetching data from server)

// Note : I have also shown how it will take parameter for Pagination and a id for specifc user data. 

type Query {

 # Query to get all sus_users_talez
  getAllSusUsers(limit:Int, offset:Int): [sus_users_talez]

 # Query to get sus_users_talez by ID
  getSusUser(id: Int!): sus_users_talez

}

// Similarly we will create a Mutation typedef to accomplish Querying from frontend.

 type Mutation {
        # mutation endpoint for customSQL queries from frontend
        customSQLQuery(limit:Int, offset: Int, sql: String! , user_id: String!): JSON

}`

Also let me get back to the Custom Scalar type :) , And we will just add it to the above type we exported, in the same file or create and export it from a new file.

Also to note GraphQL supports JSON by itself, above in mutation we have used it as user from frontend will send a JSON formatted payload.

import { GraphQLScalarType } from "graphql";


export const TimestampWithTimezone = new GraphQLScalarType({
  name: "TimestampWithTimezone",
  description: "Timestamp with timezone offset",
  serialize: (value) => {
    // Serialize a timestamp value from your database
    return value.toISOString();
  },
  parseValue: (value) => {
    // Parse a timestamp value from a client input
    return new Date(value);
  },
  parseLiteral: (ast) => {
    if (ast.kind === Kind.STRING) {
      // Parse a timestamp from an AST literal
      return new Date(ast.value);
    }
    return null;
  },
});

Next up is Resolver Function, how we will create a Resolver Function which returns the data on the basis of User Request from Client.

Let us start building our resover file from scratch :)

export const resolvers = {
  Query: {
    getAllSusUsersTalez: async (parent, { limit, offset }) => {
      try {
        // Use Prisma to fetch all sus_users_talez
        const allUsers = await prisma.sus_users_talez.findMany({
          skip: offset,
          take: limit,
        });
        return allUsers;
      } catch (error) {
        console.error("Error fetching sus_users_talez:", error);
        throw error;
      }
    },
}

 Mutation: {
    customSQLQuery: async (parent, { limit, offset, sql, user_id }) => {
      try {
        // handling the recent queries
        // fetching the user_details for the metaData
        const user = await prisma.talez.findUnique({
          where: {
            user_id: user_id,
          },
        });

        // keeping a track for complete data count without offset
        const countQuery = `SELECT COUNT(*) FROM (${sql}) AS total`;
        const totalCount = await prisma.$queryRawUnsafe(countQuery);


        const paginatedSQL = `${sql} LIMIT ${limit} OFFSET ${offset}`;
        const result = await prisma.$queryRawUnsafe(paginatedSQL);

        // Check if there are more items
        const hasMoreItems = offset + limit < totalCount[0]?.count;

        return { result: result, hasMoreItems };
      } catch (error) {
        console.error("Error executing SQL query:", error);
        return { message: "Error Executing SQL Query, Try Different Query" };
      }
    },
  }

Here I have created a query function where I have tried fetching all the data related to the sus_users_talez also I have a added a mutation function where users can easily write a custom sql query if they want something by LIMIT and offset also they can easily get that.

For example Select * From sus_users_talez WHERE id="12345" and kaboom you get your result's.

PS: Building on top of prisma would make some extra efforts like prisma schema files and migrations if you alter any fields, if you have already a DB dump like me you will need to have a db pull with all the schema related stuff and you just need to hit a command called prisma db pull you can find it to the docs of prisma.

So now you might create many more reference from here using graphQL more adequately and also making a better use case of application you want to built on the top of GraphQL, Prisma and PG-sql using express and any Frontend framework.

Btw, I have never given my introduction on my past blogs , Here Find me out Who I am? :)

I am SHREY, SDE at early scale startup building a asset managment and compliance based application also helping people make MVP's of their startup application, I am also building Talez a product management tool where you can brainstorm the ideas of the application while building your product with many others working on the same.
You can follow me on Twitter

Share it for good karma & 🍧 ! , Have a Great Day Folks!

Product That I could never Publish, Unveiling Lessons from my failed attempts✨

SREY — Mon, 04 Mar 2024 06:57:43 +0000

Hello Beautiful People of the Internet, Welcome to my blog once again, Today I have got no series to be continued or any specific tech blog but this is one of the blog where I think people like me need to avoid this mistakes once they step into building a product which could be huge in the market and that targets the specific audience or niche category. So have a Cup of Coffee for all those who are reading before coding or grab a fruit who are already on a break reading this while coding, Here I unveil my mistakes while building a product from scratch.

Let's unveil the lessons without further ado!

Lesson One - Get a Better Product Market fit check :

While working on my first idea I took a lot of jab at people on validating my idea and this led me to not so great path and indeed that lead me to indirectly kill my product in five to six months, while it was in the development phase.

Idea Reveal :)

Any how the above will only justify when I tell you the complete story, In last Feb before I decided that I would pursue a full time job at SDE-1 position. I was thinking of building something from scratch right when I joined my University I was keen at building things got into multiple hackathon's, also the SIH'22 (Smart India Hackathon) which I made a decent positioning of Finalist making some great product for Problem Statement provided by Ministry Of Education. But this all never lasted long enough till I graduated from University, I wanted to build something huge which got some potential revolutionising the industry, For me it was my favourite one, the industry of anime and Manga though I was not an avid reader of Manga but I loved to read and binge watch some anime lately. Although it was not any streaming application. It was something related to people posting there cosplay and anime dressed photos and videos on our application which could help Manga Artist to get there anime character images in just a click and help themselves saving a lot of time and effort to draw some side characters of there recent manga and stuff though it could also help people make some random anime as well by using these characters, But underlying my social media application I thought of these AI/ML stuff and a market place idea which I thought with some friend of mine while getting use cases for this idea. I almost took some time after Feb which got me started developing it and all other check's done we started developing at the end of the Month of June. I thought to keep that stuff open-source for a while but not really later on.

But later on Coming on the Above Point I wrote Get a Better Product Market Check, I and my friend who was at same University whom I guess had some basics about Machine Learning while he was learning it, where in some search about the people who could validate our idea met some of the people who couldn't stop asking us what's the purpose of building things related to anime , I guess I heard hundreds of time the same thing that India doesn't have a market around it to support the same but I wasn't developing some stuff for money or instead we could say, I was in search, If I could make a product which could result us some yield by the market place model, but the stuff people took more seriously was the Business Model of the Application, While I thought of creating Algorithms and Own Models for the Anime Characters on the Underlying Principles of Stable Diffusion. But I I always thought all my products from the perspective of Engineering's mindset that this could be built and scaled like this rather than going hard on business side of it. Also Where I lived doesn't have a tech culture as India's Silicon valley So People Never Understood this part that experimenting a product is a stuff which could help people like me understand how does this dynamics work for a betterment of application.

Lesson Two - Get Good People With Who you built the product :

I had three or four university friends through out the four year programme from which I told two of them my idea to work on they agreed but not really as we decided to go ahead we remained (sorry cut the we) I remained (who could develop practically) two of the one was the above friend with whom I got my idea converted to some use-cases and the other one was similarly planning to do something huge for portfolio's same as me and the other lad, But with Zero Motivation and this all drained in few months remaining only with two people with one who was still learning. And hence I thought product building was tough when especially you only got the addiction of building big but you can't keep people motivated with no incentives / (pretty cool word) bucks.

Lesson Three - Friends With Job, Makes the Product Enemy:

While All this mess I already had a job which is still I am currently pursuing, but this was to only fuel some of the costs that could be paid for my side project as I recently graduated so I didn't wanted bigger bills to be paid by my parents hence I thought it was a great decision to go two timing building my product at night (two-three hours I mean) and doing a full time job together which absolutely make sense but for a bigger product and a good market fit for the MVP to work I don`t think the full time job was hand in hand it was the worst part ever cause you go full ham mode at you working place and boom you are exhausted also to make some changes I started working early in the morning a head start was always good this made it more easy for the five six months development in early phases of it.

Also The fact is I learn't a good freaking amount of stuff that no one could ever teach me and the bonanza was some dirty office politics :(

Lesson Four - Few People But Better People & Connections:

I always was kind of introvert and still I am but now when someone talks about tech I could open up easily, thanks to the corporate world, But No Connections to bigger organisation Engineers and founder, Few to no LinkedIn activities in a consistent manner and also city not that famous for tech I mean It is famous for Affordable development of Products from Scratch but ain't famous for Tech Revolutions, No one speaks tech, no conferences here or there, so building connections was near to impossible all that I had was university and old school friends and random hackathon members here and there,

Technically this could be under Lesson Three

But Meanwhile Under all this Mess I had got an opportunity to work at India's Silicon Valley, I almost had a dream for building a sustainable start-up many times right when I joined University, I thought I could handle the tech part and someone else could handle the Operations and other stuff related to business, I got a job but to build a proper product from scratch so I thought I could handle and get away from the mess creating something beautiful for my own product as well joining there and I started loosing attention on my current development plans and sprint's ( Till Now I was only the one who remained working on the product) But I always never loosed hoped on it at that very moment.
Also the Organisation that I was gonna join, where we almost completed our MVP for the product, in a month, backed off but yeah I started getting some good connection as the founder was one of the earliest member of Security at the Fastest growing Quick Commerce Brand (parent company rhymes with TOMATO), also I was not upset as that product was something that help me up-skill more helped me on how to manage product and also product engineering the stuff but yeah this was a important one to address this under this section as my Product where I was only working at that moment got almost killed after this.

Lesson Five - Keep Healthy Lifestyle

Remember last Feb as I said I had an option to join the organisation at the same City, where I completed my University Degree, After few days of my internship got completed, I got diagnosed with CNS-Syndrome due to b-12 deficiency which got me postponed that product to four or five months away which got me a late start but a good start for my software engineering journey in a real sense, Also I am more focused on health than before.

I didn't have anything to write more than this at this point While Contributing to my Second Product I am more focused to not follow this above points, but also this time I am not in a situation where too many cooks spoil the broth I am working by myself, No extra attention needed, also in the phase of MVP building this time I would prefer to product market fit after I complete MVP development (this is also an experiment) Ya, I do it a lot, My Life is now based on experiments😅

That's all Love you guys, Now After my React-Query Series I got around 6k+ Views on my blogs and meanwhile I was unaware about the numbers, hence when I checked that, I thought of writing a one to thank each of the 313 followers also to some I followed back on github.

If you got till here Get this blog a like and bookmark it to read it in future if you loved it share with someone who can avoid getting into this mess as I did

Looking Forward, I need to focus on my next product Bye:)

JS && Operator Quirks: Better Approaches?

SREY — Mon, 01 Jan 2024 06:47:42 +0000

Hello everyone! It's been a while, and I hope you're all doing well. Reflecting on the past year, I'm thrilled about the strides I made in my writing journey, sharing insights and experiences through my blogs. Here's to more growth and compelling stories in the coming year! Also Happy New Year!

Without further ado lets roll with the title above, Recently on the internet I saw Theo explaining what's wrong with the using of && operator in js while returning inside of a functional component.

Let me explain, What I mean't above by my code :

 export default function App() {
  const people = ["deliSrey", "deli", "Srey"];
  return (
    <div className="App">
      {people.length
        && people.map((_people, index) => {
            return <li key={index}>{_people}</li>;
          })}
    </div>
  );
}

It result's something like this:

You might think What's wrong in it There is nothing wrong in it, but also there is something not correct about It, here it could result in a potential bug if you see in a hindsight

For Example If there is nothing inside the people array list and hence the people.length is 0 which by default returns 0
rendered on the screen something like this, Here is the code and result attached:

Above is how ternary operator replaced by && operator looks like, which almost make sense but not in case of nested ternaries:

With Nested Ternary :

But now What should we do instead, Should we go towards ternary operator, I mean it is a praticed way but in the same video Theo explained an interesting way to do it. When there are way more ternary operators nested for checking out multiple conditions, which create a bitter mess and the code is almost unreadable, we can break it into Components,That's where the beauty of React lies, split the nested stuff into the functional components

here's how it is :

In case where the people array list is empty :

Here you can see how the readability and flow of the code is maintained more accurately and hence while working in a team It makes perfect sense to maintain the code quality where the code can be easy to debug and can be easily improved with new features.

That's all in this blog, I guess If you have already came up til here, You might also try smashing your thumb on follow and like button Trust me it helps my blog to reach more people like you and me!

Also Special Thanks to the W Engineer Theo For putting this in his video which inspired me to write a blog on it as well also here is the link to the video

Until then it's a huge goodbye fellas!

How to Preview Images before Upload in React.js with textarea dynamically increasing Modal's height ♥

SREY — Mon, 09 Oct 2023 04:16:43 +0000

Hello Folks on the internet, mostly from last few days I was revolving around react-query but now tbh, I was not getting enough escape from my task and at night I use to play valorant to release some dopamine and feel pleasurable, Today Morning I was contributing to my own product which I am building from scratch and I found something very noticable their are many blogs on Drag and Drop API but there are few on building the image selection and preview it from scratch, so here I got the idea of making a great one using TS. (By the way I have seen lot of it lately, People are moving from TS to JS especially the contributors to library. With no further Ado Lets Jump in Straight towards the blog.

Lets start with some basic jsx code to render a modal which takes some values as input and also a image button to add a image which we can preview.

   <div className='parent_modal_input_container'>
      <div className='input-container'>
        <textarea
          maxLength={250}
          onChange={handleChange}
          placeholder='Random Thoughts? :/ Enter here '
          className='input_text_area'
          rows={textareaRows}
          autoFocus={true}
         />
       </div>
    </div>

Okay in the above piece of code we create a basic jsx to render on the page where i guess there is some parent element with div tag and also a textarea with a maximum length of 250 characters and also added rows to make the card or i might say parent element grow it size with the number of rows increased. so there I took a state to keep a track of rows i.e. with textareaRows; also apart from that I have added the onChange property when users starts typing we incur with a handleChange function.

As we added states for two things one to keep a track of textareaRows and the other is the content as the user types here is the code for that...

 const [textContent, setTextContent] = useState<string>("")
 const [textareaRows, setTextareaRows] = useState<number>(1);
 const [selectedFiles, setSelectedFiles] = useState<File[] | null>(); // let us discuss this later.

Moreover as we start towards the image preview and upload functionality we need to create the button and input where it have file type which accepts image/* that is image with all the formats of its jpg, jpeg, png etc. so here we define the input tag below wrapped inside a button (before you find css in the entire blog I must say, I didnt add css cause i dont want to make a blog too big keep it very cut to short with essential parts! )

Here is the input tag with the same stuff we talked about

  <button>
    <label>
      <input type='file' accept="image/*" className='hidden'  
        multiple={false} onChange={(e) => uploadFile(e)} />
         <ImageIcon width={25} height={25} />
      </label>
  </button>

Here I have used svg's with the most specific thing that is svg's as ReactComponent and it requires very special addition to typescript and if in specific you are adding a vite bundler to bundle things up.

Let start with some basic steps towards our functionality and add handleChange function,

const textareaLineHeight = 24; // Adjust this value according to your styling
    const minRows = 1;
    const maxRows = 5; // Adjust as needed

    const previousRows = e.target.rows;
    e.target.rows = minRows; // Reset the rows to the minimum

    const currentRows = Math.floor((e.target.scrollHeight - textareaLineHeight) / textareaLineHeight) + 1;

    if (currentRows === previousRows) {
      e.target.rows = currentRows;
    }

    if (currentRows >= maxRows) {
      e.target.rows = maxRows;
      e.target.scrollTop = e.target.scrollHeight;
    }

    setTextContent(e.target.value);
    setTextareaRows(currentRows);

hence in the above code we added a minimum rows up to 1 and maximum rows upto 5 with a variable defined previous rows , current rows, previous rows is nothing but the event.target.rows which is defined by the dom event parameter. and current rows is the floor value of (e.target.scrollHeight - textareaLineHeight)/ textareaLineHeight why this cause this is the portion where we add the stuff for dynamically increasing the parents size when the row size increases by defining the current row hence if we say that the currentRow = 1 it means the scroll height would be 24 and hence [{(24-24)/24} + 1].

hence if the text overflows and starts to the next line the value of the current rows increases and becomes 2 with the scroll height with value 48 hence it all revolves around the initial value of textareaLineHeight.

Moreover if you see there is an unusal behaviour it oscillates between the rows that is current and previous rows why does this happens is very clear as we are defining this stuff inside the onChange parameter hence to make sure it works smooth upto some extent is our target and we can do it by a very special and beloved stuff a debounce function by lodash ( why lodash my project is already have lodash so i might use it but to build it from sratch is very simple here you go with this link but I might say what does debounce do, it delays the function with the milliseconds as argument hence upto that millisecond it will delay the function this will make something good to us I promise :)

const debouncedHandleChange = debounce((e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const textareaLineHeight = 24; // Adjust this value according to your styling
    const minRows = 1;
    const maxRows = 5; // Adjust as needed

    const previousRows = e.target.rows;
    e.target.rows = minRows; // Reset the rows to the minimum

    const currentRows = Math.floor((e.target.scrollHeight - textareaLineHeight) / textareaLineHeight) + 1;

    if (currentRows === previousRows) {
      e.target.rows = currentRows;
    }

    if (currentRows >= maxRows) {
      e.target.rows = maxRows;
      e.target.scrollTop = e.target.scrollHeight;
    }

    setTextContent(e.target.value);
    setTextareaRows(currentRows);
  }, 130);

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    debouncedHandleChange(e);
  };

Remember we discussed the stuff before while declaring state we left one of it there the selectedFile stuff that is used to keep track for the files when the input is given that is when the button is clicked the upload function runs

  const uploadFile = (e : 
   React.ChangeEvent<HTMLInputElement>) => {
    if(!e.target.files || e.target.files.length === 0){
      setSelectedFiles(undefined);
    }
    if(e.target.files){
      setSelectedFiles([e.target.files[0]])
    }    
}

so what we did above is nothing we made a check for if the target.files exist and its length should be greater than 0;
if it is then we use the setter method in our case our setterState dispaches and it sets the e.target.files[0] why 0 make sure you do a console.log you will get to know :)

lets print it out i mean render it out

<div className='parent_modal_input_container'>
   <div className='input-container'>
     <textarea
       maxLength={250}
       onChange={handleChange}
       placeholder='Random Thoughts? :/ Enter here '
       className='input_text_area'
       rows={textareaRows}
       autoFocus={true}
      />
    </div>
 </div>
 {
   selectedFiles && selectedFiles.map((file, key) => {
    return (
     <div key={key} className="row mt-2 relative">
       <span className="filename">
         <img className='rounded-md h-[150px] md:w-[500px] md:h- 
            [400px] m-auto' src={URL.createObjectURL(file)} alt= 
            {file.name} />
         </span>
      </div>
     )
   })
  }

So whats left, I dont think so much is left we also need to remove the image if some one wants to make a new image selected from the input field that we defined, so hence for doing that we might handle it using making selectedFiles set to undefined so this will remove it from the selectedFiles state contianing array.

Okay that is not something major, but we will make it more interesting defining it

{
   selectedFiles && selectedFiles.map((file, key) => {
    return (
     <div key={key} className="row mt-2 relative">
       <span className="filename">
         <img className='rounded-md h-[150px] md:w-[500px] md:h- 
            [400px] m-auto' src={URL.createObjectURL(file)} alt= 
            {file.name} />
         </span>
         <section>
           <button onClick={() => removeFile([file])}><CloseIcon 
             className='absolute top-0 right-[20%] md:right-[5%] 
             h-[22px] w-[22px] md:h-[30px] md:w-[30px]' />
            </button>
         </section>
      </div>

     )
   })
  }

// here is the function :()

  const handleRemovePhotoFile = (selected: File[]) => {
    const filteredFileData = selectedFiles?.filter(
     (_file) => _file !== selected[0]);
    setSelectedFiles(filteredFileData);
  };

To be very honest their is one more bug if you followed along up till now you might have known it only allows you to get the image selected for the first time but after you remove it , it dont (for me i had only one image on my system so it didn't work hence i got a way after i passed in something wanna take a guess I spent completley more than 45 mins thinking what is wrong hence just add something to our input of file like this

<input type='file' accept="image/*" className='hidden' multiple={false} onChange={(e) => uploadFile(e)} value={""} />

You Got it Right ??

The value parameter we forgot to add, oh silly me but yeah I got to over-think that i should reset e.target.files or make it null, but finally as a fraction of my attention went to input tag and asked where is value that is initially defined and here i got it so that's why i say I write code and mostly it is shitty 🃏!

But there is one more thing left if you see and fix it please comment it down cause I already have fixed it If you can find it Please just let the people know how cool are you finding the bugs!

So that's all if you have reached till here you might have liked it and i might have added some value to you if it is so please drop a like and save I guess it will make my day!

That's all folks I might be a shitty coder But I am great debugger Haha Just Kidding I do worst at both Btw have a look at my product as well Kinda making my life harder working at it but i love it though

Thats all Have a great week ahead ! GoodBye Fellas!

React Query as State Manager

SREY — Mon, 02 Oct 2023 12:34:46 +0000

Up til now we mostly discussed data fetching and mutating using react-query but is it all , has it got any more things just than fetching and mutating stuff the answer is it can also be a asynchronous state manage instead we should say that react-query is a async state manager and small part of it consist of the network activity.
Alright Lets start with React-Query as State Manager!

React Query as State Manager

So how is it possible to maintain state globally using react-query, in the initialisation of our series we started with some basic terminologies such as queryKey so their we mentioned that it maintains the data fetching call/query uniquely with a key which unleashed some power and this is the power we were talking about the queryKey, react-query shines out until we feed the promises ( I mean till the time we do data fetching cause data fetching mostly produce promises); so if I call query at two different places in my codebase with the same queryKey it will give me the same data.

function Place1 () {
const {data : spotifyData} = useSpotifyData();
----
-----
-----
----
} 

function Place2 () {
const {data : spotifyData} = useSpotifyData();
----
----
----
----
}

here if we see both the component calls the same custom hook which abstracts out the useQuery() data fetching function to be written again and again and have a query-key in common which renders the same data.

But how do we keep the data synchronize then ?

Yes this too have an answer, the react-query being a server state library this have nothing to do where front-end can own the data , if we display the data on front-end than it is always the one which is fetched from API and we just render the small parts of it , so for example the application like instagram where a user posts the photos and the comments and likes are changing real time , how much of it is accurate (by accurate I mean how much of them is stale, as it changes from fresh to stale very fast)

Lets see how react query synchronises the data

Loader or some Data that is stale ?

React-query is very famous for its caching mechanism hence react-query prepares & cache the data whenever you need to render it on front-end even if it is stale data as users might not like some loading state or no data until freshly brewed data renders on screen.

Moreover to decide when is to re-validate stale data that is making a query to the back-end interface for fresh data and to be keeping our re-renders in-expensive we need to make some great decision for re-fetch

When we can do the refetches then ?

refetchOnWindowFocus : This might seem crazy when we are in a development mode but in production this do make sense , as it revalidates whenever we focus or switch the browser tabs , but when user does this after leaving application open for a long time and then if the user returns to the application, hence feeding the fresh data will always be great.

refetchOnReconnect : whenever you loose the connection and re-gain it will revalidate at that point of time

refetchOnMount : this revalidates happen's when the component having the query useQuery mounts

That's all Folks This blog was small I know but this will be paving a good road-map ahead making our journey more beautiful, well until next time its a goodbye

If you are till here , please drop some feedback or like the blog, Goodbye

Fetching & Mutating Data with React-Query

SREY — Wed, 20 Sep 2023 10:10:59 +0000

Hello again, you might found me lame, messing things around but React Query would never be !

How can be fetching done in React Query ?

if you ever thought the above question lets deep dive than !

If you are inside the react.js community , you might have heard useQuery hook or might be if you read my last part of this series you might have knew it ; Does it ring a bell if not don't worry we will see what useQuery hook is !

useQuery is a hook inside the react-query which manages different things for eg (inital Data fetching , loading states , refetching etc) this all stuff that too asynchronously in background !


const getuser = () => {
  return axios.get("/api/v1/me");
}


const {
   data: response,
   isLoading,
   isError,
 } = useQuery(["fetch-s-history"], () => getUser());
}

Here in the above piece of code if we see the useQuery hook expects a queryKey which indeed is an array and a query function that returns the API response as promise untill you do it asynchronously, Moreover it has many more parameters that we can add like enabled (which is of great use though) wait we will explore together I swear!

Hence the useQuery Hook returns the data in our case response as we gave it an alias hence the response can be used across the code-base if we made a custom hook for it and return the same thing without destructing any of below

{data , isLoading , isError}

Does key unleash some power ?

Yes it does the queryKey helps in caching the data independently, when any dependency inside the query changes, the refetch of the query occurs on the basis of staleTime , so you might be wondering what exactly is a dependency, if you know React that I guess you do you may know the working of useEffect() hook it takes some dependency inside the dependency array to re render the component if you don't add any by default the useEffect will run your custom logic written inside the hook and it will get called after performing all the DOM updates.

Let's see exactly what I said

type todoState = "done" | "pending" | "all"

type todo = {
 id : number ;
currentState : todoState;
}

type todoProps = Array<todo>

const queryClient = new QueryClient(); 

const fetchTodos = async (state: todoState): Promise<todoProps> => {
 return await axios.get(`api/get/todo/${state}`)
}

export const useFetchQueryTodos = (state : todoState) => {
useQuery({
    queryKey: ['todos', state],
    queryFn: () => fetchTodos(state),
    initialData: () => {
      const allTodos = queryClient.getQueryData<todoProps>(['todos', 'all'])
      const filteredData =
        allTodos?.filter((todo) => todo.currentState === state) || []
      return filteredData.length > 0 ? filteredData : undefined;
)}
}

So if we see above, the piece of code changes when the user changes the currentState of the todo like from done to pending or pending to done , hence the data will be fetched and then we can filter the data on that basis if we need done we have a state matching it with the todo.currentState and if its pending state it follows the same set of instruction.

Let's talk about enabled as we left it while we were discussing the querykey

so What can we do is we can make a query dependable for example if a query1 gets depended on a id which I get from a different query2 so we can make our query1 dependable on query2 here it is how :

const {data : products} = useQuery({
  queryKey: ['products'],
  queryFn: getProductData,
})

const productId = product?.id


const {data : productDetail ,
isLoading : isproductDetailLoading } = useQuery({
queryKey :["product-detail],
queryFn : () => getProductFn(productId),
enabled : !!productId
})

So here in above example we can see we fetched the productDetail using the useQuery hook but we allowed the query on when there is a enabled state is set to true (cause enabled take a boolean value) hence if you want to disable a query from running automatically we go and make enabled parameter to false

so does it mean we only make a query disable using enabled parameter that`s not the case , we can also make it enable later at anytime as you can see in my above example where I took the productId and allow a query when the value of enabled is turned to true ,

But what if enabled is false ?

Lets get to that case

if query have a cache , then the query initialized with the status of success
the query will not automatically fetch on mount and also it will not refetch automatically in the background
The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching.
Also if it does not have cache data the query status will be set to loading

UseMutation hook ...

(the state keeping track for mutation 😌)

So what is mutation ;

Mutation for example when we login using our email and password the server returns us a token as a response hence it is just a classic example of managing a server state with useMutation hook , For a better definition remember Dominik?
(the guy who saved me from falling inside a trap) He got a great definition for this hook

As the name indicates, useMutation also has some sort of side-effect. Since we are in the context of managing server state with React Query, mutations describe a function that performs such a side effect on the server. Creating a todo in your database would be a mutation. Logging in a user is also a classic mutation, because it performs the side effect of creating a token for the user.

-- Dominik's blog

Let's dive with an example on useMutation Hook
(bear with me my code blocks has some issue i promise the white screen will never be back again )

you heard me saying sideEffect, So what is a sideEffect ?

In react we say a side-effect is when we perform something outside the scope of react , so in react-query we say this in the context of managing state server side hence when we create something like making a signup API hit and making a mutation on the database ; making a database entry for that particular user.

So there are many similarities between useQuery and useMutation, but as we saw in react-query run queries automatically and also smartly runs in background for some data updates to keep client and server in sync , but what if the mutation just follow the same way , if i wanted to add a list of users on my application , and each time if it run the mutate query every time my browser window focus so we dont make it run immediately but we can make them run on some action for example i create a add button beside the user i want to add and invoke a function but wait which function might be {mutate : mutatioFn}

so in a way we can say mutateFn with the help of useMutation() hook that we wrote will only invoke when we want to mutate something like updation of profile or addition of new password etc.

One more thing is that we can use useQuery (as it have a state shared) hence we can make a query run in different component and return the same cache data but it wont with the useMutation hook

Thats all from my side, but want to have a good look in it untill I publish further have a look on Dominik's blog and React-Query docs as well up-till then have a look at cleaning the code we usually used to mess with React-Query

Thanks for the amazing response on the first two part, Good Bye Fellas.

React Query : staleTime vs cacheTime

SREY — Sat, 16 Sep 2023 12:27:01 +0000

So in our last part we looked the basics of default configuration and also looked at the concepts of stale time and cache time, but what should be ideally the case, how to make it the best possible scenario by assigning the values to them respectively.

Ideally many of you will also think are they both inter-related? I might not have the best answer for it but lets have a look into it and find out, (TLDR : Answer is no)
Shall we?

Does Setting Any One of them Impacts other ?

staleTime basically is the time before the data fetched again from server gets stale or we may say the data that haven't been updated, as in my last part of this series I mentioned the default time of staleTime is set to be 0 in react-query hence when the data gets fetched it is considered to be stale

and hence the data gets re fetched again if you open your networks tab you will see multiple API request firing from client side. So does cacheTime gets impacted from this , no cacheTime is a length of time which removes the inactive data or stale data after a certain amount of time by default 5 mins from cache , so stale data is something that is responsible for making API request when data gets stale or when fresh or updated data is needed.

Let's see What scenarios rises when we go with default configurations!

Data Fetch: When you fetch data using React Query, the data will be considered fresh and not stale at the time of the initial fetch.
Immediate Staleness: Since you've set staleTime to zero, as soon as the initial data is loaded, it will be marked as stale. This means that if you try to access the same data again, React Query will consider it stale and attempt to refetch it immediately.
Cache Retention: Since you didn't specify a value for cacheTime, React Query will use its default behavior. By default, data will be retained in the cache for 5 minutes (cacheTime of 300,000 milliseconds). After that time elapses, the data will be automatically removed from the cache.
Continuous Refetching: Because the data is immediately marked as stale and React Query will try to refetch it, you'll likely see frequent network requests for the same data as long as the data remains in the cache (up to the default cacheTime of 5 minutes). This can potentially result in a high volume of network requests for the same data.

In summary, setting staleTime to zero and not specifying a custom cacheTime will lead to immediate staleness of fetched data and frequent refetching as long as the data remains in the cache, which is retained for the default 5-minute duration. This behavior might not be desirable in most cases because it can result in unnecessary network requests. You should carefully consider the appropriate values for staleTime and cacheTime based on your application's requirements to achieve the desired caching and data freshness behavior.

So What should happen if we set cacheTime lower Than staleTime

Huh! its all about timing (no puns intended)

So now If we set staleTime : 15 mins and cacheTime : 5 mins for example just grab a minute and think what should happen

If client sends a request for the first time , the backend interface sends the data requested and the staleTime set to 15 mins make data to be considered as fresh for that amount of time
But now the User on client side jumps on different application or tab , and return after 10 minutes so he should have the data to be rendered on client side should be fresh , but cacheTime as set to be 5 minutes which is lower than staleTime hence the data will not be fetched from cached data we need to make a re fetch for the data from the backend interface even though the data is not stale it is refetched it doesn't make sense, right ?

Thanks to Dominik (react-query maintainer)for this correction (This is the updated part after we had the convo on twitter)

That above thing that you thought or I thought is not correct cause cacheTime is not about something as the name suggest it is indeed something like when a user is on `/me` route and if he goes to a different route `/feeds` for example than the cacheTime get kicks in as query becomes inactive or unused hence if the user doesn't comeback to the same route`/me` under 5 mins which is our default time for cacheTime than the data from the cache gets removed silently and hence a manual refetch would be needed as the cacheTime or staleTime will not automatically have refetch running. Moreover in version 5 it had been renamed to `gcTime` and hence setting it lower than staleTime doesn't make any difference

Here is the github_issue referencing for the same

There will be many articles where you find the same reasoning on cacheTime where I got mistaken but thanks to Dominik ( React-Query maintainer) for pointing out my mistake

Configuring Stale Time & Cache Time For a Particular API request



const { data } = useQuery(['my-data'], fetchMyData, { 
  staleTime: 10 * (60 * 1000), // 10 mins 
  cacheTime: 15 * (60 * 1000), // 15 mins 
});

Configuring StaleTime & CacheTime Globally

So if you want all of your data to be considered fresh for longer - you can! Instead of changing cacheTime and staleTime on useQuery, you'll set it on the QueryClient.



const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 10*(60*1000), // 10 mins
      cacheTime: 15*(60*1000), // 15 mins
    },
  },
});

Meet You again with the new part of this series, if you got something valuable and if you liked it (I know cause You are reading this) please drop a feedback it will be helpful to make this journey more better.

What the heck is React-Query?

SREY — Fri, 15 Sep 2023 11:51:34 +0000

Heard about maintaining your states globally when you need the data across the components either we can do it on the client side maintaining the cache data using some store or state management library or we can make the ultimate move now using React Query !

What is React Query then ?

React Query is a server state library for managing the asynchronous client and server operation and actions reducing the boiler code that used to be a part when you add a client state management library probably React-Redux ! if you develop application in React.js

How to use React Query efficiently and does it replaces the state management libraries ?

It might be not possible to replace the libraries when the application is very complex or it has very complex modal structures or simply we can say application like music production for example (FL studio) otherwise React Query is the perfect choice with no issues.

The Docs as well is almost perfect to get started and play along with the queries to see what happens and why !

Lets Start with the basics of React Query

The React Query have a great default configs but what are they and what do it mean is a great thing to understand if you want to work on react-query efficiently I rewrite these in my code-base where I write the QueryClient Provider.

const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retry: 1,
      },
    },
  });

So here if we see we tried to overwrite the default configuration of the QueryClient(), where we did a refetchOnWindowFocus:false cause we don't want to refetch data by calling API's every time our browser window gets focused after everytime we switch the tabs on our browsers
so what is retry retry is the number of times the query re-runs before showing the error message displayed by the onError method or any custom logic written inside the fucntion, for example retry: fasle will not allow any query re-run.

I know I know , you are getting a lot of question , question on how the data gets updated inside the query-call or what if my data doesn't get updated

The concept you need to look is staleTime , so what in freaking world is staleTime, it is the length of time before your data becomes stale. By default the staleTime in react-query is 0 , which means immediately your data is consider to be stale

If your data is fresh it will be cached or saved and it will be used repeatedly without making API calls to the server

So you might be thinking will be there any cache time for caching the data again if there is any changes inside the data coming from server , by the way We do have cacheTime it is the time before the cached or inactive data gets removed.

In react-query cacheTime by default is set to 5 mins and hence we need to carefully choose it and the difference between them is great to understand how react-query works and to set both staleTime and cacheTime is a little bit of challenge moreover we will see in the next part how we can make it a piece of ease by seeing in depth how it works

Till then its a great goodbye from my side if you want to learn it from official docs React-Query

Untill Next time !

Stack DataStructure in JS

SREY — Mon, 05 Jul 2021 07:02:36 +0000

// hello virtual folks !

# Lets give a shot to Stack without further ado

Stack as everybody know what it means Stack is nothing but a vector representing a list of elements that follows a particular order that is LIFO while they are deleted or removed or printed out .

Here is the code for the Stack implementation

// Stack Is nothing but a vector that follows LIFO order , it has // push , pop and peep as main Functionalities


// defining a class stack first off all 

class Stack {
    // array(vector) is used to implement the stack 

        constructor(){
            this.items = [];
        }

}

Now lets add the code for Push and Pop operation and also Peek

  // now lets create a push function

        push(element){
            // push element 
            this.items.push(element);    
        }

Now we will see how to add code with Pop operation !

   pop(){
            if(this.item.length == 0){
                return (" UNDERFLOW");
            }
            return this.items.pop(element);
        }

Now here let me take a second of your's and say you why we are checking the condition

if the array is empty the pop function inside the code of stack will be having no values to delete when we solve the question by pointers we take the pointer condition as top = -1 and then we start pushing the values in it by adding pointer to 1 each time we add values to it

similarly we also need to keep an eye for removing the top element every time in the stack if the stack doesn't contains any value on the vector then it will return us the result of the if part of the code that is Underflow ! and if stack is not empty it will return us the result that we opt for that is the deleted value or element .

Now we see here how to write code for the peek

 // peek  return's the top most element but does not delete it 

        peek(){
            return this.items[this.items.length - 1]    ;
        }

here is a small additional code for printing the stuff out one by one in Stack datastructure


  // printStack 
        printStack(){
        var str = "";
        for (var i = 0; i < this.items.length; i++)
            str += this.items[i] + " ";
        return str;
    }

feel free to play around through the code and get your hands dirty on this !

// adding element to the stack for purpose of test 

var stack = new Stack();

stack.push(20);
stack.push(30);
stack.push(50);
stack.pop();
stack.peek();


console.log(stack.printStack());

I hope you can get started with the implementation if you were stucked after learning the concept of Stack data Structure Hope you find it interesting , untill then G00D Bye !

Operator's String And Loop's with a tint of if and else.

SREY — Thu, 08 Apr 2021 10:41:12 +0000

HELLO My dazzling friends from the internet , todays lets start by thinking what is "Operators" or why not 'String' ?
Lets see them one by one :D

Operator's

Java divides the operator in the below parts
=> Arithmetic Operators
=> Logical Operators
=> Assignment operators
=> Comparison operators
=> Bitwise Operators

Arithmetic operators consist of '+','-','*','/',and Increment and decrement ++ and -- respectively and % (modulo) .

Comparison operators consist of >,<, >= , <= , == , and !=

Logical operators consist of &&(and) ,||(or) , !(Not)

Assignment operations are = , += , -= and many more of this types .

String's In java :

Strings are used for storing text , it can be also said as the collection of words stored in double quote's

How to create a string variable

String name = "DELI" ;

Other string method's :
length() ~ for example => name.length();
toUpperCase();
toLowerCase();

Dribble 【 ͡❛ ͜ʖ ͡❛】 :

There are many more , but all are not of use and if they are in need they can be searched on the internet .

Now lets see some concatenation

The + operator can be used between strings to combine them. This is called concatenation
for example ;

String firstName = "Elon" ; 
String SecondName  = "Musk";

System.out.print("HEY MR "+ firstName + SecondName);

Output :
HEY MR Elon Musk

Some More Dribble :\

Ever thought of Writing code this way :

String var1 = "HEllo" ;
int var2 = "13 "
int var3 = var1 + var2    // output will be HEllo13

HERe we conclude Strings

Before we jump on the Loops lets start with If and else condition's

Think about what you like to eat between two things that you like the most , you might be making decisions right ....ok cool forget food for a second If today rains i will be playing and if not i will play .....or there are tons of example , similarly in coding we have set of instruction that we need to select in cases of different context so we use if else or switch

format of if else :

if (condion){
---------------
}
else{
--------------
}

Switch

switch(expresion){
case 1 :
case 2 :
case 3 :
case 4 :
case 5 :
.
.
.
.
break ;
 default :
}

Default keyword :

The default keyword specifies some code to run if there is no case match :)

Break Keyword :

The break keyword specifies that whenever it is seen it stops the execution in the switch and hence the statement will be printed .
A break can save a lot of execution time because it "ignores" the execution of all the rest of the code in the switch block.

Loop's

Loops are written to repeat the specific statements certain time until the condition are met .
Loops saves time , reduction of error and also can make the code DRY (do not repeat yourself)

There are three loops
=> DO while
=> While and
=> for

int i = 0;
while (i < 5) {
  System.out.println("HEY i Love to Read these JAva series ");
  i++;
}

Output :
HEY i Love to Read these JAva series
HEY i Love to Read these JAva series
HEY i Love to Read these JAva series
HEY i Love to Read these JAva series
HEY i Love to Read these JAva series

for(int j=0 ; j<5 ; j++){
System.out.println("HEY i Love to Read these JAva series ");
}

Output :
HEY i Love to Read these JAva series
HEY i Love to Read these JAva series
HEY i Love to Read these JAva series
HEY i Love to Read these JAva series
HEY i Love to Read these JAva series

Let's conclude

THis was the basics of java it has much things that can be learned in detail if one tries to try competitive coding and learn as much as they can as said learning never stops !

DEV Community: SREY

Rendering One Million Checkboxes Efficiently: Performance Insights using Vanilla JS🙃

Figuring it Out 🤔:

💡Note :

Building Blocks in JS for rendering UI Checkboxes:

Infinite list loading 🤔, with React Query - useInfiniteQuery hook !

SQL Querying Made Simple with GraphQL and Prisma !

Hola Amigos

Lets start with the Setup in backend for GraphQL followed by Prisma

So what are typeDef and resolvers ?

Next up is Resolver Function, how we will create a Resolver Function which returns the data on the basis of User Request from Client.

Product That I could never Publish, Unveiling Lessons from my failed attempts✨

Lesson One - Get a Better Product Market fit check :

Idea Reveal :)

Lesson Two - Get Good People With Who you built the product :

Lesson Three - Friends With Job, Makes the Product Enemy:

Lesson Four - Few People But Better People & Connections:

Technically this could be under Lesson Three

Lesson Five - Keep Healthy Lifestyle

JS && Operator Quirks: Better Approaches?

How to Preview Images before Upload in React.js with textarea dynamically increasing Modal's height ♥

React Query as State Manager

React Query as State Manager

Lets see how react query synchronises the data

Loader or some Data that is stale ?

Fetching & Mutating Data with React-Query

How can be fetching done in React Query ?

if you ever thought the above question lets deep dive than !

Does key unleash some power ?

But what if enabled is false ?

UseMutation hook ...

React Query : staleTime vs cacheTime

Does Setting Any One of them Impacts other ?

Let's see What scenarios rises when we go with default configurations!

So What should happen if we set cacheTime lower Than staleTime

Thanks to Dominik (react-query maintainer)for this correction (This is the updated part after we had the convo on twitter)

Configuring Stale Time & Cache Time For a Particular API request

Configuring StaleTime & CacheTime Globally

What the heck is React-Query?

What is React Query then ?

How to use React Query efficiently and does it replaces the state management libraries ?

Lets Start with the basics of React Query

Stack DataStructure in JS

// hello virtual folks !

# Lets give a shot to Stack without further ado

if the array is empty the pop function inside the code of stack will be having no values to delete when we solve the question by pointers we take the pointer condition as top = -1 and then we start pushing the values in it by adding pointer to 1 each time we add values to it

Operator's String And Loop's with a tint of if and else.

Operator's

String's In java :

How to create a string variable

Dribble 【 ͡❛ ͜ʖ ͡❛】 :

format of if else :

Switch

Default keyword :

Break Keyword :

Loop's

Let's conclude

Dribble 【 ͡❛ ͜ʖ ͡❛】 :