DEV Community: Mohd Ahmad

What is Atomic State Management - Create One Yourself

Mohd Ahmad — Sun, 14 May 2023 16:48:23 +0000

Where does the state live?

The answer is not straightforward. React developers typically employ two strategies for structuring the application state: component state (using useState) and global store (using Redux). The state can either be closely linked to the component or stored in the Redux store, which means it is closely tied to the source and cannot be created independently.

Have you ever found yourself in a situation where you wanted to utilize the useState hook but also pass a reference to your state object? This is where the atomic state management model comes in.

Atoms

Atomic State Management involves utilizing Atoms as a central repository for state management. It can be seen as an upgraded version of the useState hook, allowing for state sharing between components. This approach combines the benefits of both component state and global store patterns. Atoms are purposefully designed to hold a singular value.

It’s short in writing and easy for sharing between components, as demonstrated in the example below.

// Example from jotai.org
const animeAtom = atom(animeAtom);

const Header = () => {
  const [anime, setAnime] = useAtom(animeAtom)
  ...
}

As you can see in the above example Atomic State Management model reduces boilerplate code compared to approaches like flux pattern and is very similar to React's useState hook.

TL;DR Use atomic state management techniques to achieve better flexibility in organizing application state management.

Build your own from scratch.

Before we proceed you can check the project on github. This implementation is for learning purposes, for production use check Jotai or Recoil.

Atom Creators / Factory implementation

let atomId = 0;

function atomFactory(payload) {
  const atom = {};

  const subscribers = new Map();

  let subscriberIds = 0;

  const key = atomId++;

  // This function returns the current value
  atom.get = function () {
    return atom.value;
  };

  // sets value and notify to subscribers
  atom.set = function (value) {
    atom.value = value;
    notify(value);
  };

  // notifier function to notify value
  function notify(value) {
    subscribers.forEach((subscriber) => {
      subscriber(value);
    });
  }

  // subscribe to changes; returns unsubscribe fn
  atom.subscribe = function (fn, initialId) {
    const id = initialId ?? (subscriberIds += 1);

    subscribers.set(id, fn);

    return () => void subscribers.delete(id);
  };

  // actual atom value
  atom.value = payload;

  return atom;
}

export { atomFactory as atom }

It is a very basic implementation of atom factory it returns an atom object.

// atom returned by factory fn

{
    get: () => void
    set: (value: any) => void
    subscribe: () => (() => void)
}

useAtom hook implementation

export function useAtom(atom) {
  const [state, setState] = useState(atom.get());

  useEffect(() => {
    // subscribe on mount and sets local state with new value (used for sync atom to reacts state)
    const unSubscribe = atom.subscribe(setState);

    // unsubscribe on unmount
    return () => unSubscribe();
  }, [atom]);

  // just setter function.
  const setAtomValue = useCallback((value) => atom.set(value), [atom]);

  return [state, setAtomValue];
}

uhhmmm.... it's good but we need a little bit of refactoring, we need useAtomValue / useAtomSetter hooks like Jotai to optimize rerenders.

useAtomValue and useAtomSetter Implementation

Here we are breaking useAtom hooks into two parts.

// useAtomValue
export function useAtomValue(atom) {
  const [state, setState] = useState(atom.get());

  useEffect(() => {
    const unSubscribe = atom.subscribe(setState);
    return () => unSubscribe();
  }, [atom]);

  return state;
}

// useAtomSetter
export function useAtomSetter(atom) {
  return useCallback((value) => atom.set(value), [atom]);
}

Refactored useAtom Hook

export function useAtom(atom) {
  return [useAtomValue(atom), useAtomSetter(atom)];
}

Usage

It's the same as Jotai

// Example from jotai.org
const animeAtom = atom('bleach');

const Header = () => {
  const [anime, setAnime] = useAtom(animeAtom)
  ...
}

Derived Atom Implementation.

// refactored atom factory fn
function atomFactory(payload) {
  const atom = {};

  const subscribers = new Map();

  let subscriberIds = 0;

  const key = atomId++;

  // getAtom function used to subscribe to another atom (for derived state)
  atom.getAtom = function (prevAtom) {
    prevAtom.subscribe(() => {
      if (payload instanceof Function) {
        atom.value = payload(atom.getAtom);
        notify(atom.value);
      }
    }, `atom_${key}`);

    return prevAtom.get();
  };

  atom.get = function () {
    return atom.value;
  };

  atom.set = function (value) {
    atom.value = value;
    notify(value);
  };

  function notify(value) {
    subscribers.forEach((subscriber) => {
      subscriber(value);
    });
  }

  atom.subscribe = function (fn, initialId) {
    const id = initialId ?? (subscriberIds += 1);

    subscribers.set(id, fn);

    return () => void subscribers.delete(id);
  };

  // check if the payload is a function (derived atom) or normal atom
  if (payload instanceof Function) {
    atom.value = payload(atom.getAtom);
  } else {
    atom.value = payload;
  }

  return atom;
}

export { atomFactory as atom }

useAtom will remain the same.

Derived atom example

import { atom, useAtom, useAtomValue } from './lib';

const priceAtom = createAtom(15);

const discountAtom = createAtom(10);

const discountedPriceAtom = createAtom((get) => {
    return (get(priceAtom) / 100) * get(discountAtom);
});

const Component = () => {
  const [price, setPrice] = useAtom(priceAtom);

  const discountedPrice = useAtomValue(discountedPriceAtom);
  ...
}

BONUS: atomWithLocalStorage Plugin

import { atom } from "./lib";

export function atomWithLocalStorage(key, payload) {
  //Create new atom
  const newAtom = atom(payload);

  // check value exists in localstorage or not
  const prevVal = JSON.parse(localStorage.getItem(key) || "null");

  if (prevVal) {
    // if the value exists in localstorage sets to atom
    newAtom.set(prevVal.data);
  }

  // subscribe to changes and set value in localstorage
  newAtom.subscribe((val) =>
    localStorage.setItem(key, JSON.stringify({ data: val }))
  );

  return newAtom;
}

Conditional types in typescript react

Mohd Ahmad — Thu, 09 Sep 2021 12:33:00 +0000

Here I am making a Button component which should render <button> or <a> conditionally, using the as prop. eg:-

// should render <button> component, prop 'as' is 'button' by default
<Button> Click me </Button>

// should render <a> component 
<Button as="a" href="xyz.com" > Visit here </Button>

The code

import React, {
  AnchorHTMLAttributes,
  ButtonHTMLAttributes,
} from "react";

type Props = Partial<
  ButtonHTMLAttributes<HTMLButtonElement> &
    AnchorHTMLAttributes<HTMLAnchorElement> & { as: "a" | "button" }
>;

const Button: React.FC<Props> = ({ as: As = "a", ...rest }) => {
  return <As {...rest}></As>;
};

export default Button;

but it is showing anchor element properties (eg: href) while as = 'button', it is not a big problem here but when I was trying to make a base component which should render as a div | main | ul | section it gives error but after removing ul it is working fine
eg

// should render <div> component 
<Base as='div' />

// should render <main> component 
<Base as='main' />

// should render <section> component 
<Base as='section' />

// should render <ul> component 
<Base as='ul' />
^ the error part as ul props and [div | main | section] props are 
not matching

Photo search app in Next JS

Mohd Ahmad — Mon, 09 Aug 2021 07:23:47 +0000

Hello!

Recently I started creating a photo search app in React (Next.js) using Unsplash API.

A little introduction to myself

I am Mohd Ahmad, this is my first project after a todo app, my username is @zakiazfar, it is because Mohd Ahmad is a popular name, so finding a username is hard.

So, why Next.js instead of CRA

Because it is awesome and provides many features out of the box like,

Zero Config
Image Optimization
Typescript
File System Routing
Internationalisation
API Routes
and many more Read Here

Here's what I got, visit the Live URL or see screenshots below.
Suggest me how can I make it better

MohdAhmad1 / photon

This is a photo search app made by next js and Unsplash API

Home Page

Home Page Dark

Category Page

Search Page

Help! How to make masonry layout in react

Mohd Ahmad — Thu, 29 Jul 2021 11:14:29 +0000

Hey there, I am making a react photo gallery app in which I am consuming UNSPLASH API, but I am not able to make a masonry layout in my app.

I have found many techniques to make masonry layouts, but none of them satisfy my needs.

#1 CSS column layout technique

problem :: It is mixing previous and newly added photos, and IDK why?

#2 using react-masonry-css

problem :: bottom layout is broken

#3 using react-responsive-masonry
problem :: same as #2 bottom layout is broken

#4 using react-photo-gallery
problem :: no support for using next/image and blurhash

#4 using StackGrid
problem :: no support for infinite loading and it is too slow

Make a chat app with Node JS

Mohd Ahmad — Wed, 07 Apr 2021 00:41:08 +0000

I want to make a chat app with react, node, socket.io, and Prisma. I am unable to add direct message (dm) functionality but added group functionality.

My Schema

datasource db {
  url      = env("DATABASE_URL")
  provider = "postgresql"
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  email     String   @unique
  username  String
  password  String
  sender    Messages @relation("sender")
  receiver  Messages @relation("receiver")
}

model Group {
  id        Int        @id @default(autoincrement())
  messages  Messages[]
  user      Users[]
}

model Messages {
  id          Int     @id @default(autoincrement())
  text        String 
  group       Group   @relation(fields: [groupId], references: [id])
  groupId     Int
  sender      User    @relation("sender", fields: [senderId], references: [id])
  senderId    Int
  reciever    User    @relation("reciever", fields: [recieverId], references: [id])
  recieverId  Int
}

Manage multiple node versions in windows

Mohd Ahmad — Sun, 04 Apr 2021 12:39:17 +0000

I am gonna introduce you to a tool named Volta which is a nvm alternative.
Volta is not limited to Node JS but also manages other JS tools like global npm packages, package managers for node, etc.

How to use Volta

# install Volta
curl https://get.volta.sh | bash

# install Node
volta install node 
OR
volta install node@version

# start using Node
node

# change node version
volta pin node@version

For more information check out volta website

WYSIWYG editor for react js

Mohd Ahmad — Sat, 13 Mar 2021 12:03:32 +0000

I am making a blog using react js but can't find a WYSIWYG editor.

I have found some but there are some issues:-

Draft.js: Don't know where to start
React-Quill: can't add plugins for image resize, embed, auto-link, and many more
Braft Editor: no plugin for embeds like tweets or GitHub gist
TinyMCE: just started exploring it

I Want To learn Auth in Node JS

Mohd Ahmad — Thu, 04 Mar 2021 06:17:11 +0000

I Want to learn node js authentication which is secure as when I use Gmail SMTP it says that your site is less secure