Forem: Pranav Badami

Elevate your JavaScript game with essential ES6 tricks!

Pranav Badami — Sun, 19 Nov 2023 17:21:49 +0000

Embracing ES6 (ECMAScript 2015) is like unlocking a treasure trove of features that not only elevate your JavaScript game but also transform your coding journey into a more enjoyable and efficient experience. In this blog, we'll dive into some of the best ES6 tricks that will not only enhance the readability of your code but also empower you to write more concise and expressive programs.

Arrow functions

ES6 introduces arrow functions, providing a more concise syntax for writing anonymous functions.

// Traditional Function
function add(a, b) {
  return a + b;
}

// Arrow Function
const add = (a, b) => a + b;

Getting the previous value of the state in the setState call using the useState hook.

// A useState hook initialisation
const [state, setState] = useState(0)

// Updating the state w.r.t to previous value
setState(prev => prev + 1)

let arr = ['one','two','three']

// Map through the array
arr.map(number => (
   console.log(number)
)}

Destructuring Literals

Destructuring allows you to extract values from arrays or objects and assign them to variables in a more intuitive way.

// Array Destructuring
const [first, second] = [1, 2];

// Object Destructuring
const { name, age } = { name: 'John', age: 30 };

Destructuring function parameters and return value, also incase you are using some date being returned asynchronously/API call make sure to handle the case when the value you are trying to destructure from is undefined

const doSomething = ({name, age}) => {
 return {name , age}
}

const {name, age} = doSomething({name: 'John Doe', age: 24})

// Data returned from an API call
const data = getDate()

//Destructuring
const {name, age} = data || {}

//Directly destructuring 
const {name, age} = getData() || {}

Spread and Rest operator

The spread operator (...) allows you to spread elements of an array or object, while the rest parameter collects remaining arguments into an array.

// Spread Operator
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

// Rest Parameter
const sum = (...numbers) => {
  return numbers.reduce((acc, num) => acc + num, 0);
}

⭐️ One of the most useful application of the spread operator is while updating/altering one value of an object, retaining all the other values as it is

const [obj, setObj] = useState({ name: 'John Doe', location: { city: "Bengaluru", state: "Karnataka" } })

//Update only the city from 'Bengaluru' to 'Mysuru'
setObj(prev => ({...prev, location: {...prev.location, city: 'Mysuru'}}))

Template Literals

Template literals provide a more flexible and readable way to concatenate strings, including variables and expressions. This can be used to declare a multiline string.

const name = 'World';
console.log(`Hello, ${name}!`);

const description = `My name is ${name}
I am from Bengaluru
I'm stuck in traffic`

These are a few tricks that can make your code cleaner, maintainable and easier to write overall. I might have missed out on a few of them, but these are the ones that actually make my life easier on an everyday basis. Happy Coding...

Top 10 react packages for SaaS platforms

Pranav Badami — Sat, 04 Nov 2023 10:23:48 +0000

Why Use React Libraries?

When it comes to building a product with React, going it alone can be quite a challenge. While it's not impossible, it's certainly a lot easier—and often wiser—to seek assistance from the vast world of open-source packages. React libraries are like your trusty companions in the development journey, simplifying complex tasks, enhancing functionality, and accelerating your project's progress. In this blog post, we'll explore the top 10 React libraries that can be your go-to resources, making your React development experience more efficient and enjoyable. So, without further ado, let's delve into the world of React libraries.

1. React-Query : Your Ultimate Query and Mutation Companion

In the ever-evolving world of React development, optimizing queries (GET requests) and mutations (POST, PUT, DELETE) can be quite a task. That's where React-Query comes into play, and it's been a game-changer for us. This library simplifies frontend data management with an intuitive implementation using React hooks, offering a plethora of advantages that make it a must-have in your toolkit:

Easy and simplified query management
Infinite scroll/Pagination for queries
Effortless Invalidation and Data Refetching
Cache management
Robust Error handling

2. Streamline Form Management with React-Hook-Form

Forms are a cornerstone of web applications, but managing them can often be a daunting task. Dynamic field rendering, state management, and validations can quickly become a maze of complexity. If you've ever found yourself tangled in the web of form-related challenges, React-Hook-Form is here to rescue you. Here is what react-hook-form has to offer:

A simple hook which helps you initialise your form and provides all the methods that can be used in the
FormProvider wrapper with useFormContext hook which can help you manage states for clean and maintainable code.
useFieldsArray hook allows you to provide a dynamic fields form which allows users to add or remove fields.
Easy form validation using yup-resolver

3. Unleash Creativity with React-Flow

In the world of SaaS (Software as a Service), one tool that's invaluable for many is the flow builder. It's a canvas where you design the logic and the flow of your application. Among the numerous libraries out there, React-Flow stands out as a true gem, and it's undoubtedly one of the most enjoyable and creative libraries we've had the pleasure of using. Lets see how we can have some fun with this library:

Intuitive Flow Building
Very easy state management for nodes and edges
Easily create logic to connect nodes and build a drag and drop flow builder
No limits or hard and fast rule to use this library. Its upto you, to check how crazy you can get with it.

4. Plop: The Micro Generator Framework That Transforms Your Workflow

While not exclusively a React package, Plop has been an unsung hero in our development toolkit. This micro generator framework may not be a household name, but it's an absolute game-changer when it comes to saving time and streamlining repetitive tasks, it helps with:

Easy and consistent folder structuring in your project.
Easy files/folder creation with predefined content inside them.
Simple pattern to make sure uniformity is maintained, especially while working with large teams

5. Flat: Mastering Object Flattening and Unflattening with Precision

In the world of application development, handling complex nested objects is a common challenge. Whether you're working with JSON data, configuration files, or any application state, object flattening and unflattening can be a cumbersome task. That's where "Flat" comes to the rescue, offering a consistent and reliable solution for maintaining the structure of your objects without altering their underlying values.

Provides flatten and unflatten functions which flatten a nested object and unflatten it back to the original form. for example:

const nested_object = {
    "name": "Pranav",
    "age": 24,
    "company": "Fyno",
    "address": {
        "city": "Bengaluru",
        "state": "Karnataka",
        "country": "India"
    }
}

On using flatten(nested_object) we get

{
    "name": "Pranav",
    "age": 24,
    "company": "Fyno",
    "address.city": "Bengaluru",
    "address.state": "Karnataka",
    "address.country": "India"
}

And using unflatten(flattened_object) will give back the original object.

6. Simplify File Uploads with React-Dropzone

In the age of modern web applications, file uploads have become a routine part of our online experiences. Whether you're building an image-sharing platform, document management system, or any application that involves handling files, React-Dropzone is your answer to seamless file upload functionality. With its simple drag-and-drop interface, it empowers you to achieve remarkable feats. Lets see what we can achieve with this library:

Simple drag and drop zone/area where any file can be dropped to select/upload.
useDropzone react hook, to easily manage and use all methods provided by the library.
Defining file types to accept and number of files to accept.
Custom validation for files, like showing accepted and rejected files.

7. React-Hot-Toast: Elevating User Interaction with Alerts and Notifications

In the realm of user-centric applications, timely communication and feedback are essential. React-Hot-Toast has emerged as a personal favourite among developers for delivering real-time alerts, notifications, and in-app reminders, elevating the user experience to new heights. This library offers a powerful yet straightforward way to enhance user engagement through visual communication.

Very simple to use
Easily customisable, you can add many sorts of customisation like delay, ttl (time to live) and many more things.
Designs for these toasts are very flexible and easy to customise according to product design requirements.

8. Luxon: Mastering Time and Timezones for Precision Data Handling

In the world of application development, mastering time and timezone management is a fundamental requirement. Many platforms, whether they deal with analytics, activity logs, or any aspect of data that's time-sensitive, need a robust solution for handling time in different formats and working with timezone offsets. Luxon is that solution, offering a powerful toolkit to manage time with precision and confidence. Any sort of data management which is time sensitive would benefit from:

Comprehensive date and time manipulation
Timezone support
Variety of formatting with date and time, as suitable for different use cases

9. Empower Non-Technical Users with React-Query-Builder

In the world of application development, database queries are often a complex and intimidating aspect, particularly for those outside the technical domain. This challenge becomes even more significant in a no-code environment where users are looking for simplicity and empowerment. React-Query-Builder is the answer, simplifying the process of building queries through a user-friendly UI and providing the ability to export in various formats, including JSON, SQL, MongoDB, CEL, and SpEL.

10. Elevate User Experience with Use-Query-Params

In the realm of web applications, a seamless user experience often hinges on the ability to maintain and share URLs with filters, search parameters, and other states. Use-Query-Params steps in as an indispensable tool, simplifying the process of encoding and decoding data as query parameters. With the useQueryParam hook, it's easy to achieve the fine balance between URL sharing and an enhanced user experience.

Easily maintainable states with URL
Any data type can be encoded to the query params

In our journey at Fyno, these top 10 React libraries have been invaluable allies, simplifying our development process and addressing the diverse requirements that surface in the world of SaaS platforms. If you haven't already explored the potential of these packages, we encourage you to give them a try. They have the power to streamline your development workflow, enhance user experiences, and make life simpler for you too. So, dive in, experiment, and discover how these libraries can elevate your React projects to new heights. Your next big breakthrough might just be a package away.

React Query - Maintaining Query cache

Pranav Badami — Fri, 13 Oct 2023 18:16:01 +0000

React Query has greatly simplified frontend API query handling with improved error management and efficient data caching. However, managing query keys can be challenging, as we discovered at Fyno when dealing with duplicated key names, leading to frustrating hours of debugging. This situation highlights the significance of effective key management. Duplicated keys can lead to data mix-ups and unexpected results. Lets delve into best practices for managing query keys, allowing you to harness React Query's full potential without the hassle of duplicated keys.

Old Approach

We create a react query hook for each API call and define the query key cache in the react query hook and if we want to invalidate some query then we had to go find the query key and use the same one. Which is a lot of manual work and when you are trying to be as productive as possible, this can cause issues which will be time consuming to debug.

Some examples of the old approach:

1 . Simple Query Key

import { useQuery } from 'react-query'

const getTemplates = () => {
 // make your API call here
 return response
}

export const useGetTemplates = () => {
  return useQuery(['templatesList'],() => getTemplates())
}

import { useQuery } from 'react-query'

const getEvents = () => {
 // make your API call here
 return response
}

export const useGetEvents = () => {
  return useQuery(['eventsList'],() => getEvents())
}

2 . Dynamic Query Key

import { useQuery } from 'react-query'

const getTemplateDetails = () => {
 // make your API call here
 return response
}

export const useGetTemplateDetails = (name, version) => {
  return useQuery(['templateDetails', name, version],() => getTemplateDetails())
}

import { useQuery } from 'react-query'

const getEventDetails = () => {
 // make your API call here
 return response
}

export const useGetEventDetails = (name, version) => {
  return useQuery(['eventDetails', name, version],() => getEventDetails())
}

Let's deep dive into the problem

Following the best practices, we've been using separate React Query hooks for each API call to the backend. However, each query call requires a unique query key to store the API response data, and as our project has grown with new features, we've encountered some challenges:

Query Key Conundrum: One of the dilemmas we faced is deciding what query key to assign to the cache for the response data from an API call. It may seem straightforward at first, but as your project evolves, making this decision can become quite a puzzle.
Invalidation and Refetching: Figuring out the right query key to invalidate or trigger a refetch based on another API call or a specific action can be like solving a complex puzzle. It's critical to ensure that your data remains up-to-date and accurate.
The Duplicity Dilemma: As we expanded our codebase, we encountered the issue of creating duplicate query keys. This happened when data from various API calls with different responses started to overlap, leading to confusion and unexpected results.

These challenges are not unique, and they can affect the efficiency and maintainability of your project. Lets explore strategies and techniques to tackle these issues head-on, ensuring a smoother development process and a more predictable and reliable application.

New Approach

To address these challenges, we took a strategic approach. Firstly, we centralized the creation of all query cache keys for easy accessibility and maintenance. Our goal was to make this process dynamic, allowing customization with specific values while maintaining a standardized approach.

Query Keys Factory

Our solution? We call it the "Query Keys Factory." Now, you might wonder why we went with such a name - well, sometimes, cool just sounds cool. It's a nifty little React hook, and its job is simple but incredibly valuable. This hook holds the keys to all the query keys, organized neatly according to the features within our product.

Create a simple global react hook, you can call it Query Keys Factory to be cool like us.

export const useQueryKeysFactory = () => {

  //--------Templates-----------> /templates
  const templateKeys = {
    list: ['templatesList'],
    details: (name, version) => ['templateDetails', name, version]
  }

//--------Events-----------> /events
  const templateKeys = {
    list: ['eventsList'],
    details: (name, version) => ['eventDetails', name, version]
  }

  return { templateKeys, eventKeys }
}

In the code snippet above, we've showcased a straightforward example of a query cache for two API calls of two features, which in this case, are "Templates" and "Events". These API calls include a listing API, providing a list of all the templates/events, and a details API for retrieving information about a single template/event. What makes this approach especially powerful is the encapsulation of these keys within the templateKeys/eventKeys section. These keys serve as the foundation for all query keys related to the /templates and /events endpoint respectively.

By centralizing these keys in one place, you gain remarkable accessibility and maintainability. You can easily access them from anywhere in your application, making the management of query keys a breeze. To illustrate how it works in practice, let's consider the implementation of a React Query hook for retrieving the list of templates and events. This way, you can see how this approach seamlessly integrates into your development process, offering a cleaner, more organized way to handle query keys throughout your project.

1 . Simple Query Key

import { useQuery } from 'react-query'

const getTemplates = () => {
 // make your API call here
 return response
}

export const useGetTemplates = () => {
  const { templateKeys } = useQueryKeysFactory()

  return useQuery(templateKeys['list'],() => getTemplates())
}

import { useQuery } from 'react-query'

const getEvents = () => {
 // make your API call here
 return response
}

export const useGetEvents = () => {
  const { eventKeys } = useQueryKeysFactory()

  return useQuery(eventKeys['list'],() => getEvents())
}

2 . Dynamic Query Key

import { useQuery } from 'react-query'

const getTemplateDetails = () => {
 // make your API call here
 return response
}

export const useGetTemplateDetails = (name, version) => {
  const { templateKeys } = useQueryKeysFactory()

  return useQuery(templateKeys['details'](name, version),() => getTemplateDetails())
}

import { useQuery } from 'react-query'

const getEventDetails = () => {
 // make your API call here
 return response
}

export const useGetEventDetails = (name, version) => {
  const { eventKeys } = useQueryKeysFactory()

  return useQuery(eventKeys['details'](name, version),() => getEventDetails())
}

Now, let's dive into a straightforward yet powerful scenario: invalidating cache based on another API call. We'll walk you through creating a React Query hook for making a delete template/event request. If this deletion operation succeeds, we'll perform an act of cache magic – invalidating the listing API call's cached data. This little trick ensures that our application always fetches the freshest, most up-to-date data from the backend.

Here's a sneak peek at how it's done:

import { useMutation, useQueryClient } from 'react-query'

const deleteTemplate = template_name => {
  // Add your API call for deleting the template with name template_name
}

export const useDeleteTemplate = () => {
  const queryClient = useQueryClient()
  const { templateKeys } = useQueryKeysFactory()

  return useMutation(template_name => deleteTemplate(template_name), {
    onSuccess: () => {
       queryClient.invalidateQueries(templateKeys['list'])
       }
   })
}

import { useMutation, useQueryClient } from 'react-query'

const deleteEvent = event_name => {
  // Add your API call for deleting the template with name event_name
}

export const useDeleteEvent = () => {
  const queryClient = useQueryClient()
  const { eventKeys } = useQueryKeysFactory()

  return useMutation(event_name => deleteTemplate(event_name), {
    onSuccess: () => {
       queryClient.invalidateQueries(eventKeys['list'])
       }
   })
}

There you go – query invalidation made simple. No more hunting for query keys, just trust the Query Keys Factory to handle it for you. It's all about efficiency and letting the tools do the work.

In conclusion, our exploration of managing query keys with React Query has provided valuable insights. We've introduced the Query Keys Factory as a solution to simplify key management, streamline development, and minimize errors. With this approach, you can confidently handle query keys and optimize your development workflow. Mastering React Query's query keys can significantly improve your experience, making your projects more efficient and reliable. Happy coding!