Forem: Enyel Sequeira

Building a Data Table with Optimistic Updates

Enyel Sequeira — Sun, 03 Nov 2024 16:36:25 +0000

Introduction

Today, I'll share how I built a polished food database management system using modern React patterns. We'll focus on creating a responsive data table with seamless optimistic updates, combining the power of TanStack Query (formerly React Query) with Mantine's component library.

Project Overview

Requirements

Display food items in a data table
Add new items with immediate feedback
Handle loading and error states gracefully
Provide smooth optimistic updates

Tech Stack

TanStack Query: Server state management
Mantine UI: Component library and form management
Mantine React Table: Advanced table functionality
Wretch: Clean API calls
TypeScript: Type safety

Implementation Guide

1. Setting Up the Foundation

First, let's define our types and API configuration:

// Types
export type GetAllFoods = {
  id: number;
  name: string;
  category: string;
};

export type CreateNewFoodType = Pick<
  GetAllFoods,
  | 'name'
  | 'category'
>;

// API Configuration
export const API = wretch('<http://localhost:9999>').options({
  credentials: 'include',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

// TANSTACK QUERY 
export const getFoodOptions = () => {
  return queryOptions({
    queryKey: ['all-foods'],
    queryFn: async () => {
      try {
        return await API.get('/foods')
          .unauthorized(() => {
            console.log('Unauthorized');
          })
          .json<Array<GetAllFoods>>();
      } catch (e) {
        console.log({ e });
        throw e;
      }
    },
  });
};

export const useGetAllFoods = () => {
  return useQuery({
    ...getFoodOptions(),
  });
};

2. Building the Data Table

The table component using Mantine React Table:

const FoodsView = () => {
  const { data } = useGetAllFoods();

  const columns = useMemo<MRT_ColumnDef<GetAllFoods>[]>(
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
      },
      {
        accessorKey: 'name',
        header: 'Name',
      },
      {
        accessorKey: 'category',
        header: 'Category',
      },
      // ... other columns
    ],
    []
  );

  const table = useMantineReactTable({
    columns,
    data: data ?? [],
    // Optimistic update animation
    mantineTableBodyCellProps: ({ row }) => ({
      style: row.original.id < 0 ? {
        animation: 'shimmer-and-pulse 2s infinite',
        background: `linear-gradient(
          110deg,
          transparent 33%,
          rgba(83, 109, 254, 0.2) 50%,
          transparent 67%
        )`,
        backgroundSize: '200% 100%',
        position: 'relative',
      } : undefined,
    }),
  });

  return <MantineReactTable table={table} />;
};

3. Creating the Form

A form component for adding new foods:

const CreateNewFood = () => {
  const { mutate } = useCreateNewFood();

  const formInputs = [
    { name: 'name', type: 'text' },
    { name: 'category', type: 'text' },
  ];

  const form = useForm<CreateNewFoodType>({
    initialValues: {
      name: '',
      category: '',
      // ... other fields
    },
  });

  return (
    <Box mt="md">
      <form onSubmit={form.onSubmit((data) => mutate(data))}>
        <Flex direction="column" gap="xs">
          {formInputs.map((input) => (
            <TextInput
              key={input.name}
              {...form.getInputProps(input.name)}
              label={input.name}
              tt="uppercase"
              type={input.type}
            />
          ))}
          <Button type="submit" mt="md">
            Create New
          </Button>
        </Flex>
      </form>
    </Box>
  );
};

4. Implementing Optimistic Updates

The heart of our implementation - TanStack Query mutation with optimistic updates:

export const useCreateNewFood = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationKey: ['create-new-food'],
    mutationFn: async (data: CreateNewFoodType) => {
      await new Promise(resolve => setTimeout(resolve, 3000)); // Demo delay
      return API.url('/foods').post(data).json<GetAllFoods>();
    },
    onMutate: async (newFood) => {
      // Cancel in-flight queries
      await queryClient.cancelQueries({ queryKey: ['all-foods'] });

      // Snapshot current state
      const previousFoods = queryClient.getQueryData<GetAllFoods[]>(['all-foods']);

      // Create optimistic entry
      const optimisticFood: GetAllFoods = {
        id: -Math.random(),
        ...newFood,
        verified: false,
        createdBy: 0,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      };

      // Update cache optimistically
      queryClient.setQueryData(['all-foods'], (old) =>
        old ? [...old, optimisticFood] : [optimisticFood]
      );

      return { previousFoods };
    },
    onError: (err, _, context) => {
      // Rollback on error
      if (context?.previousFoods) {
        queryClient.setQueryData(['all-foods'], context.previousFoods);
      }
    },
    onSettled: () => {
      // Refetch to ensure consistency
      queryClient.invalidateQueries({ queryKey: ['all-foods'] });
    },
  });
};

5. Animation Styles

The animation that brings our optimistic updates to life:

@keyframes shimmer-and-pulse {
  0% {
    background-position: 200% 0;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(83, 109, 254, 0.2);
  }
  50% {
    background-position: -200% 0;
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(83, 109, 254, 0);
  }
  100% {
    background-position: 200% 0;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(83, 109, 254, 0);
  }
}

Best Practices

Optimistic Updates
- Immediately update UI for better UX
- Handle error cases with rollbacks
- Maintain data consistency with proper invalidation
Type Safety
- Use TypeScript for better maintainability
- Define clear interfaces for data structures
- Leverage type inference where possible
Performance
- Cancel in-flight queries during updates
- Use proper query invalidation
- Implement efficient form state management
User Experience
- Provide immediate feedback
- Show loading states
- Handle errors gracefully

Future Enhancements

Consider these improvements for your implementation:

Undo/redo functionality
Form validation rules
Error boundary implementation

Results

Once Completed Request

Conclusion

This implementation demonstrates how to create a robust data management system using modern React patterns. The combination of TanStack Query, Mantine UI, and thoughtful optimistic updates creates a smooth and professional user experience.

Remember to:

Keep your components focused and maintainable
Handle all possible states (loading, error, success)
Use TypeScript for better code quality
Consider user experience in your implementation

What challenges have you faced implementing optimistic updates in your React applications? Share your experiences in the comments below.

Using React Hook Form with Controller? No more

Enyel Sequeira — Thu, 09 Mar 2023 19:16:01 +0000

Introduction

React Hook Form is a popular library that simplifies the process of building forms in React. One of its key features is the use of "Controller" components, which provides a way to connect an external UI component such for example a component from Material Mantine or Chakra ui.

I absolutely love RHF and have made my job easier, however one thing that I really dislike is how sometimes it can be hard to make it work with other components libraries (or maybe its just me).

I always struggle specially setting up headless ui tailwind and the main reason, is the way internals of the library behave. I will show a way to make it work nice and easily without any hassle or any bugs (at least I haven't found any yet) similar I will show you how you can remove the usage of Controller and use the hook with other component libraries

RHF definition of the hook is here https://react-hook-form.com/api/usecontroller in short this hook allow us to do everything the Controller component does

Let's look at a simple code

let's see how the Controller works in case you are not aware of it


const {test} = useForm<YOURTYPE>()

<Controller
  control={test.control}
  name="endDate"
  render={({ field: { onChange } }) => (
    <DatePicker
      defaultValue={new Date()}
      classNames={{
        root: "w-72",
      }}
      onChange={(e) => onChange(e?.toString())}
      maxDate={new Date()}
      allowFreeInput
      label="To"
      placeholder="To"
      icon={<IconCalendar size={16} />}
    />
  )}
/>;

now the code above works just fine, this is the implementation if you are using mantine this is the component library we are using, what this is doing, is just passing the onChange that we get from the Controller to the DatePicker and as expected we would get a value in string format

Imagine you will have to pick a date in different parts of your code sure you can keep adding a controllereach time and yes it will work, instead what I propose is to use this as a starting point and make it better using TSand default props we get from both RHFand mantine let's see an alternative

import type { FieldValues,  UseControllerProps} from "react-hook-form";
import { useController} from "react-hook-form";

export type OwnDatePickerProps<T extends FieldValues> =
  UseControllerProps<T> & Omit<DatePickerProps, "value" | "defaultValue">;

export function OwnDatePicker<T extends FieldValues>({
  name,
  control,
  defaultValue,
  rules,
  shouldUnregister,
  onChange,
  ...props
}: OwnDatePickerProps<T>) {
  const {
    field: { value, onChange: fieldOnChange, ...field },
    fieldState,
  } = useController<T>({
    name,
    control,
    defaultValue,
    rules,
    shouldUnregister,
  });

  return (
    <DatePicker
      defaultValue={new Date()}
      value={value}
      onChange={(e) => {
        fieldOnChange(e?.toString());
      }}
      error={fieldState.error?.message}
      {...field}
      {...props}
    />
  );
}

we create our own type using TSand omit certain values that we don't need or we don't want to control, and just let RHF do its thing, we use generics to achieve this, I am not a TS wizard, but this approach allow us to use the component without Controller like so


const {test} = useForm<YOURTYPE>()

<>
....code
<OwnDatePicker
 name="endDate"
 control={test.control}
 maxDate={new Date()}
allowFreeInput
label="To"
placeholder="To"
 icon={<IconCalendar size={16} />}
classNames={{
   root: "w-72",
   }}
/>
.....
</>

and the beauty of this is that it is typesafe and if one props is not there TSwill start complaining, avoiding errors

now let's look at another of my favorite which is headless ui I have a love/hate relationship when setting it up with RHF not anymore though found a good way to make it work, overwriting/omiting and using the RHF default to handle change state. Let's look at some code

import { Listbox, Transition, ListboxProps } from "@headlessui/react";
import {
  FieldValues,
  useController,
  UseControllerProps,
} from "react-hook-form";

export type OwnMultiSelectProps<
  T extends FieldValues,
  TTag extends ElementType = "div",
  TType = string,
  TActualType extends {} = Record<string, any>
> = UseControllerProps<T> &
  Omit<ListboxProps<TTag, TType, TActualType>, "value" | "defaultValue"> & {
    // OWN PROPS YOU WOULD LIKE
  };

// usage

export function OwnMultiSelect<
  T extends FieldValues,
  TTag extends ElementType = "div",
  TType = string,
  TActualType extends {} = Record<string, any>
>({
  name,
  control,
  defaultValue,
  rules,
  shouldUnregister,
  ...props
}: OwnMultiSelectProps<T, TTag, TType, TActualType>) {
  const {
    field: { value, onChange: fieldOnChange, ...field },
    fieldState,
  } = useController<T>({
    name,
    control,
    defaultValue,
    rules,
    shouldUnregister,
  });

  return (
    <div className="w-72">
      <Listbox
        value={selectedItems}
        onChange={(e) => fieldOnChange(e)}
        multiple
      >
        <div className="relative mt-1">
         // your code here
          <Transition
            as={Fragment}
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
            // your code here
            </Listbox.Options>
          </Transition>
        </div>
      </Listbox>
    </div>
  );
}

and with this, you avoid workaround, like the ones I have found online, in here you allow RHF to handle most of the work, regarding the TS like I said I am not an expert, but this seems to work fine, without any complaints and you still get the goodies from Listbox props

Conclusion

In conclusion, while React Hook Form is a great library for building forms in React, it can be challenging to use with other component libraries. The Controller component can help, but it can also be cumbersome to use repeatedly throughout your code. By creating your own components that utilize the useController hook and generic types, you can simplify the process and make it more typesafe. By doing so, you can take advantage of the features of other component libraries while still benefiting from the ease of use of React Hook Form.

as always if you find there is a mistake in the code please do share so it can be changed or improved upon. Thank you!

What it feels working in a startup (Honest Review) ahead

Enyel Sequeira — Thu, 24 Nov 2022 21:52:35 +0000

That moment you interview with the CEO and you are like, I really hope I get the job, since this is something really cool, you get all anxious because you passed the other interviews and you are at the last one. Then you get a call/message saying you have been accepted as a Frontend/Backend Engineer. This moment the first time around it feels Amazing so, you now got the job at a start-up everything is going according to the plan. Now let's get to real nitty gritty or what it really feels working in one. I will point the most important factors according to My experience.

Exciting - That excitement of your first day on the job is truly amazing, you get to meet your colleagues, you get a tour of the office, and of course you get to sit on one or in my case in 3 different meetings on the first day, but wait this is not the best part, the best part of every new job are the toys you receive, like a good start-up my toy was a Mac m1 , not a big deal. Of course this is only after you do all your legal work.

For most of my time, I really loved my job and it was great, beside exciting , it was fun, rewarding. Every new day brought a different challenge from getting that news that you will be the lead of the main product the company is putting out to production to completing that first project (MY BABY). A few of the challenges? well let's see from working with a developer that was not efficient and lacked the skills needed to be at a fast pace start up, this is a big NO NO, you really need to be able to work and more than that the biggest issue was the miscommunication, this is a key part of working in the tech industry. After almost 3 months of picking the slack of that coworker you realize he has to go, talk to your CTO and he not only agrees, but also asks you why you waited so long to speak up.

Other challenges, were depending on backend to finish so you can start hooking up the frontend, yes you can always mock the data and blah blah, but this was something that would take time and quite honestly I always felt like this would be the job of the backend. As well as designs not being completed and when they were completed already a version that you worked on was already outdated, because a new design was already implemented.

I will name the top 3 things that after working on start up I will never do again, One I will never again put my well-being behind me, during the my time in the company the first 6–7 months I would put the need of the company before me, I think this mainly had to do with the fact that when you start a new job, specially a Junior role with such a responsibility you simply don't want to fail and want everything to go as planned, but the hard truth it won't go as planned. Two, I will never work crazy hours, it does not matter the deadline, many companies specially startup will work under pressure and that is fine and all, but there needs to be a limit, I spent days working about 10–12 hours to meet deadline, and once when we were on tight deadline, I was asked if I could stay extra, after 12 hours of work, needless to say my brain was fried and couldn't write any decent code at all at that point, so I will never do this again, as well as working on the weekends, there were times I would work during the weekend and now after experiencing this, I have decided and put boundaries. My weekends are sacred. Lastly, I will never spend more than 2 hours on a problem without a break, this is a cliche that many of us face, there were countless of time where I would try to debug without any break, worst thing ever, really take an break and come back, you will find that when you see the issue with fresh eyes it will be easy to fix that pesky bug.

From this experience, I also gathered that unless a specific technology is required for you to learn it for your job, forget about it. You won't have time to learn a new, in my case I wanted to learn rust but if I really wanted to learn rust in free time, I would literally have no social life, not saying its impossible, just saying I rather have a social life.

Now, I have mainly talked about things that are bad, let's talk about the good things about working in a startup, by far and the most beneficial is the experience you will get, trust me when I say, your experience will go up so fast without you noticing, when you get put into a position of leading a project as a junior, although I had previous experience and didn't think myself of a junior just starting out, the experience you will gain from this is insane, from going from a Junior to a Senior in one year(all of this is relative to where you work and where you head next), if I were to work at a FAANG, I would probably be a Junior.

Other good factors from working in a startup is that moment you see that first project get built and all the checks are green and it goes public, that feeling you get is really awesome, you see your work live being used by thousands of user the only word I can think is rewarding
Minor details that you might not think are important, but after working in a startup you will come to want. the whole work-life balance, like mentioned above there is none, and you will definitely will be asking for that the next time you interview for another company, the company culture is another thing you will be asking about for sure, you will notice that most start-up will say "yeah we pretty chill" FAKE!

At the end of the day though, you will be thankful to have worked in a start up for multiple reasons, from the exposure, experiences, recognition, responsibility, passion, that you get from the work that you have done.

Again all of this is my personal experience

My Second Week Learning Rust 🤯🤯

Enyel Sequeira — Mon, 29 Nov 2021 15:16:20 +0000

Ownership? more like getting owned by Rust

Unfortunately, my second week with Rust was a bit slow. From having work to having a task asked by a current customer to add to their site, I barely had any time to study. Although I am glad, this was the case. I will explain why.

Thoughts on my second week

The second week was hard. I had to learn about ownership and what the heck is that?
ownership is not something that you can pick up quick; at least, I am still trying to understand how it works
I learned a bit more about the heap and stack they are big in a language like Rust
structs are not too bad if you have worked with TypeScript a few gotchas there though

Ownership rules

There are three main rules when it comes to ownership:

each variable has an owner
there can only be one owner at the time
when the owner goes out of scope, the value will be dropped

These sound simple enough doesn't it? reality? It is not
I will try to explain what ownership is, this is my second week, so I could be wrong when explaining this.

The first thing to note is why does Rust have this concept of ownership is because it has to deal with memory management, and unlike other languages, Rust does not have a garbage collection. This makes Rust faster than most languages.

Ownership means that a variable cannot be used by another expression or reassigned somewhere in your code.

The example that we have is quite simple we declare a variable_a, then we try to assign variable_b the value of the variable; however, this does not work because if you remember, we can only have one owner, meaning this would give us an error.

Dealing with ownership is a difficult concept, and we have to understand the Stack and the heap in the heap. You can think where data that is not fixed on size is stored, whereas the stack data that is fixed on size is stored. These can be, for example, a bool variable, also stored in the stack, is much faster than the heap.

We can change ownership using & this allows the user to change ownership by burrowing the value of the variable like so

This works because we are using the & to borrow the value. This will not give us an error. We can also use the clone method, which would create a new variable on the heap. However, cloning is expensive to do.

Now there is a lot more going on with ownership, and quite honestly, I am still learning about it; I will link a video that really helped me understand ownership a lot better
video

I've also learned about structs, and to me, they were pretty similar to interfaces/types on TypeScript to use a struct is quite simple; we do it like so

this is very similar to TypeScript to use it as well its pretty simple; our variable needs to have the values that are in our struct

If we need to change some value from it, remember that variables are immutable by default, so you need to add the mut keyword to it. We can also refer to the value from the previous variable using dot notation.

or another way, if the values are the same in both, you can use the short syntax version .. kind of like the spread operator in JavaScript

Structs can also have methods; methods are just like functions

the first parameter is self this means is an instance of the struct the method is being called on

imp1 implements Rectangle, and we add an area fn
this area function takes a self parameter to refer to the rectangle struct,
we also use &self in the area function because we do not want to have ownership only borrow
this way, we can access the area function just like a regular object in Javascript

There is a lot more to these topics, but I will stop here. This is just a quick intro and what I think they are.

As mentioned in my previous post, I am a beginner in Rust, so if you see a mistake and want to correct me or inform me differently, please do so in the comments. It will be appreciated 😃

as always if you are interested in becoming a developer and looking for a good BootCamp, hit me up to get you a really good discount for Practicum by Yandex BootCamp

First Week learning rust

Enyel Sequeira — Mon, 22 Nov 2021 14:31:25 +0000

My First week learning Rust using (The Rust Programming Language) "The Book"

Why Rust?

As a Front-End developer, there is a lot you need to learn and keep up to date. One of the biggest changes coming to web development is web3.0, if you are not living under a rock you have probably heard about it, at least a little. With these changes coming to the web I decided to learn rust to make myself more valuable, this decision also comes after researching the kind of projects you could do. One of them is a compiler, which funny enough my favorite React framework Next uses. I am a big fan of Next and my goal is to understand how rust made a framework that was already fast even faster.

My Plan

Read The Rust Programming Language
Try and read at least 1-2 hours each week
Practice solving coding challenges with rust

My First-week Impressions

Coming from a JavaScript background, I had quite a few impressions. Most of them were good.
To begin, the first thing I noticed like most people, is that it is a static language, but what does that mean?. To put it simply, if you have been doing JavaScript for a while most likely you have started working with TypeScript and you noticed that you have to type most of your code. rust is the same way. You can either love this or hate it, for me I loved this, while I was trying some code it made me realize that you can code and deploy a lot faster if the language is typed this also cause fewer mistakes when tracking errors and deploying code.
My first week of learning rust I noticed how fast it is, I mean really fast. Creating a project was extremely fast taking less than 5s to get a project set up, granted it doesn't install any dependencies which I learned are called crates in rust.

Things I have learned this week.

By default when declaring a variable that becomes immutable, however, it is possible to make it mutable by adding the mut keyword like so let mut number
You can also declare a variable using the const keyword, gotcha with this is that constants can not be assigned to a return value of a function.
Declaring a function is similar to other languages you declare it using fn keyword and the entry point of any application is the fn main(){...code}
The way printing to the terminal works is also different in rust. In JavaScript we can interpolate, but in rust not yet, although it was mentioned that this is a feature that they want to add in the next release.
- let mut number: i32 = 50
- println!("number is {}", number);
This will print the number 50 to the terminal, it reads the variable after the comma.
Semicolons are really important in rust it can be the difference between a statement and expression and yes they are different
- a Statement is an action that does not return a value
- Expression evaluates something and returns a value
Types, in rust there are 2 data types subsets
- Scalar
  - integers
    - just like numbers and we can use them signed and unsigned. If it needs a sign before the number, it should be typed using the signed type. This is used for negative numbers.
  - floating-points
    - it has two types and the default is f64
      - f32 ==32bits==
      - f64 ==64bits==
  - Booleans
    - True/False
  - Characters
- Compound
  - Tupples
    - If you have done any TypeScript this works in a similar way
    - let tup: (i32, f64, u8) = (500, 6,4, 1)
    - We can destructure like let (x, y, z) = tup;
    - and get the values using indexes
  - Arrays
    - Arrays are a bit tricky at least to my understanding all of the array items must be of the same type. They also have a fixed length and cannot add or remove. Instead, it was mentioned if I need to add or remove to use something like a Vector (still not sure what this is)
    - Accessing the element is the same way as it is in JavaScript
- Maybe more, but still haven't learned about them.
Control flow works the same way as it does in any other language using if and else if
You have 3 ways to loop (that I have read),
- loop
- while
- for
Functions can have an explicit return and with this, it does not matter where the function is declared, you can declare it at the end of the file and call it, in the beginning, this will still work. Being that is a static typed language you need to type the parameters of a function.

Explicit return of the function five

In rust like mentioned above it is important the use of semicolons
- this would not work because if we add a semicolon at the end of x+1; fn plus_one function this makes it into a statement and if you remember a statement does not have a return value.

Conclusion

While I have learned a bit more than just these topics, I believe these are the key concepts of what I have learned this week. I will continue to write what I have learned from the book each week and share it, if you want to follow you can follow my socials.

I am a beginner in the rust language so please keep in mind that the information given here is just my understanding and might not be the correct way. If you do see a typo or misinformation please do leave a comment. 😃

PS: If you are interested in doing a Bootcamp, I have partnered with Practicum By Yandex to offer a discount. This is one of the boot camps I did, and I really enjoyed the process. It offers a 30% discount which is pretty sweet considering most boot camps are expensive.