DEV Community: Aneesh

Understanding useSyncExternalStore Through Some Examples

Aneesh — Sat, 21 Jun 2025 13:19:41 +0000

useSyncExternalStore is a React Hook that lets you subscribe to an external store.

First, let’s create a useOnlineStatus hook which automatically tracks whether the user’s device is online or offline.

useOnlineStatus
To use useSyncExternalStore and create useOnlineStatus, we need the following:

A store
A subscribe function that invokes a callback provided by React when the state inside the store changes
A function that returns a snapshot of the current state from the store

Let’s create the store:


let currentNetworkStatus = {
    online: navigator.onLine,
};

Let’s create the subscribe function:

The requirement for this function is that it accepts a callback, listens for state changes within the store, and returns a function that, when invoked, unsubscribes from listening to state changes.

(callback) => {
        const update = () => {
            const newStatus = { online: navigator.onLine };
            if (newStatus.online !== currentNetworkStatus.online) {
                currentNetworkStatus = newStatus;
                callback();
            }
        };
        window.addEventListener("online", update);
        window.addEventListener("offline", update);
        return () => {
            window.removeEventListener("online", update);
            window.removeEventListener("offline", update);
        };
    }

Let’s create the snapshot function:

This function will just return the latest state from the store.

() => currentNetworkStatus.online

Let’s pack the subscribe fn and the snapshot fn into an object:

const network = {
    getSnapshot: () => currentNetworkStatus,
    subscribe: (callback) => {
        const update = () => {
            const newStatus = { online: navigator.onLine };
            if (newStatus.online !== currentNetworkStatus.online) {
                currentNetworkStatus = newStatus;
                callback();
            }
        };
        window.addEventListener("online", update);
        window.addEventListener("offline", update);
        return () => {
            window.removeEventListener("online", update);
            window.removeEventListener("offline", update);
        };
    },
};

Now finally the useOnlineStatus:

const useOnlineStatus = () => {

    const globalState = useSyncExternalStore(
        (cb) => network.subscribe(cb),
        () => network.getSnapshot()
    );

    return globalState
}

Next, let’s construct a usePageFocus hook that returns true if the page is focused and false if it is not.

usePageFocus
Following what we did for useOnlineStatus.

Let’s first create a store:


let focusState = {
  focused: document.hasFocus(),
};

Let’s create the subscribe fn:

(callback) => {
    const update = () => {
      const newFocus = { focused: document.hasFocus() };
      if (newFocus.focused !== focusState.focused) {
        focusState = newFocus;
        callback();
      }
    };

    window.addEventListener("focus", update);
    window.addEventListener("blur", update);

    return () => {
      window.removeEventListener("focus", update);
      window.removeEventListener("blur", update);
    };
  }

Let’s create the snapshot fn:

() => focusState.focused

Now, bringing it all together, first by packing the snapshot fn and subscribe fn into an object and then creating the hook.

const pageFocus = {
  getSnapshot: () => focusState,
  subscribe: (callback) => {
    const update = () => {
      const newFocus = { focused: document.hasFocus() };
      if (newFocus.focused !== focusState.focused) {
        focusState = newFocus;
        callback();
      }
    };

    window.addEventListener("focus", update);
    window.addEventListener("blur", update);

    return () => {
      window.removeEventListener("focus", update);
      window.removeEventListener("blur", update);
    };
  },
};

Finally, the usePageFocus hook:

const usePageFocus = () => {

    const globalState = useSyncExternalStore(
        (cb) => pageFocus.subscribe(cb),
        () => pageFocus.getSnapshot()
    );

    return globalState
}

Now, moving onto the mother of all hooks in this blog, the useGlobalState hook

useGlobalState hook

This hook works similar to the zustand api. For example:

we can create a hook to work with the loggedInUser state in a single file and then import it into any component without using providers or having us prop drill the state and state setter function into components.

Example implementation:


const useLoggedInUser = () => {
    const [loggedInUser, setLoggedInUser] = useGlobalState("loggedInUser", {})

    return [loggedInUser, setLoggedInUser]
}

So let’s now build the useGlobalState.

under the hood it is all useSyncExternalStore

Let’s continue the way we built usePageFocus and useOnlineStatus.

First the store:

We can implement the store like a simple Map.

const store = new Map();

Let’s implement the subscribe function:

const subscribeToStore = (key, listener) => {
    const entry = store.get(key);
    if (!entry) return () => { };
    entry.listeners.add(listener);
    return () => entry.listeners.delete(listener);
}

This function allows components to subscribe to changes in specific pieces of global state and get notified when that state changes.

The second param in the above function will be directly passed by React when specific pieces of global state changes, all thanks to useSyncExternalStore magic.

Now let’s implement the getSnapShot function:

const getSnapshotFromStore = (key) => {
    const entry = store.get(key)
    return entry?.value
}

Now let’s put all these pieces together to create the magic hook useGlobalState:

const useGlobalState = (key, initialValue) => {

    initializeStateInStore(key, initialValue);

    const globalState = useSyncExternalStore(
        (cb) => subscribeToStore(key, cb),
        () => getSnapshotFromStore(key)
    );

    return [globalState, (newValue) => setStateInStore(key, newValue)]
}

Notice that there are two function in the useGlobalState that we have not yet seen in this blog: initializeStateInStore, setStateInStore

initializeStateInStore is used to add an entry into the map as and when we initialize a new state and it is implemented like so:

const initializeStateInStore = (key, initial) => {
    if (!store.has(key)) {
        store.set(key, {
            value: initial,
            listeners: new Set(),
        })
    }
}

setStateInStore is a function that changes values in the global store and notifies all subscribers and it is implemented like so:

const setStateInStore = (key, newValue) => {
    const entry = store.get(key)
    if (entry) {
        entry.value = newValue;
        entry.listeners.forEach((fn) => fn());
    }
}

So there we have it the useGlobalState function.

So that’s it for today, guys. We’ve looked at some example usages of useSyncExternalStore in React.

Polyfill for Array.isArray

Aneesh — Sat, 21 Jun 2025 13:09:48 +0000

The below code provides a fallback implementation for Array.isArray() in environments where it might not be available (older browsers or JavaScript environments).

var nativeIsArray = Array.isArray
var toString = Object.prototype.toString

module.exports = nativeIsArray || isArray

function isArray(obj) {
    return toString.call(obj) === "[object Array]"
}

Polyfill for a function to check if a value is a string!

Aneesh — Sat, 21 Jun 2025 13:08:35 +0000

var toString = Object.prototype.toString

module.exports = isString

function isString(obj) {
    return toString.call(obj) === "[object String]"
}

How I Optimized Huys Kitchen's Website by Serving Images with Exact Size

Aneesh — Thu, 08 Feb 2024 04:26:58 +0000

In the world of web development, optimizing website performance is a key factor for user satisfaction. Recently, I took on the challenge of enhancing the performance of Huys Kitchen's website by focusing on image optimization. This blog post details the tools I used, the steps taken, and the remarkable results achieved.

Tools Utilized:

PageSpeed Index:
To gauge the website's performance and identify areas for improvement, I employed the PageSpeed Index. This tool provided valuable insights and a performance report that served as a benchmark for the optimization process.
ImageMagick CLI Tool:
For image resizing, I turned to the powerful ImageMagick CLI tool. This versatile tool allows for efficient manipulation of images, making it an ideal choice for our optimization efforts.

Performance Assessment Before Optimization:

Before diving into the optimization process, I conducted a thorough performance analysis using PageSpeed Index. The initial report can be viewed here. This served as a baseline to measure the impact of the changes made.

Optimization Steps:

The primary focus of the optimization was on resizing images to match the exact dimensions they were rendered on the page. To accomplish this, I utilized the ImageMagick CLI tool to efficiently resize and serve images tailored to their display requirements.

Performance Assessment After Optimization:

The results post-optimization were nothing short of impressive. The updated performance report can be accessed here. Witnessing the improvements firsthand, it became evident that serving images with exact dimensions significantly enhanced the website's load time and overall user experience.

Conclusion:

Optimizing a website involves a combination of strategic choices and the right tools. In the case of Huys Kitchen, focusing on image optimization using the ImageMagick CLI tool proved to be a game-changer. The journey from the initial performance analysis to implementing changes and witnessing the positive impact on load times emphasizes the importance of meticulous optimization in delivering a seamless online experience.

update

This is the performance report I got after minifying the javascript and css files (report)[https://pagespeed.web.dev/analysis/https-www-huyskitchen-com-au/zgvki2mqrr?form_factor=desktop]

Enhancing SEO with Slugs: A Better Approach for URL Composition

Aneesh — Wed, 24 Jan 2024 08:52:50 +0000

In the world of web development, constructing URLs plays a crucial role in creating user-friendly and search engine optimized applications. When it comes to displaying details of objects from a database, choosing the right field for URL composition becomes a critical decision. In this blog post, we'll explore why using slugs is a superior option compared to other fields, using the example of a MongoDB database storing place details.

The Challenge: Choosing the Right Field

Consider a MongoDB database with a place object containing properties such as name, address, id, otherdetails, and images. Traditionally, developers might opt to use the id or name fields for URL composition. However, each approach has its drawbacks.

Using `id`: SEO Unfriendly

While using the id seems logical for ensuring a unique URL, it lacks meaning. Search engines prefer URLs that provide context and relevance to the content. A URL with just an arbitrary ID does little to enhance SEO.

Using name: Potential Pitfalls

On the other hand, using the name field seems more user-friendly, as it provides a meaningful URL. However, names can be problematic. They might contain spaces, special characters, and varying capitalization. URLs with such elements are not considered best practice, as they can lead to inconsistencies and SEO challenges.

The Solution: Introducing Slugs

To address these challenges, a better solution is to introduce a new field in the place object called a slug. A slug is a URL-friendly version of a string, typically generated by transforming the original string into a format that eliminates spaces, special characters, and capitalization issues.

Advantages of Using Slugs

SEO-Friendly URLs: Slugs provide URLs that are meaningful, descriptive, and optimized for search engines.
Consistency: Since slugs are generated algorithmically, they ensure consistency and predictability in URLs.
User Experience: Slugs contribute to a better user experience by creating clean and readable URLs.
Avoiding Special Character Issues: Slugs eliminate the problems associated with special characters and capitalization in URLs.

Conclusion

In conclusion, using slugs for URL composition in web applications, particularly when dealing with database objects like places, is a wise choice. It strikes a balance between meaningful URLs for users and SEO-friendly practices for search engines. By implementing slugs, developers can create a more polished and professional web experience. So, the next time you're faced with the decision of which field to use in your URLs, consider the benefits that slugs bring to the table.

A Simple Way to Expose Internal Component State in React

Aneesh — Wed, 11 Oct 2023 15:28:29 +0000

Consider a scenario where you have a DatePicker component with its internal state, and you want to provide a way for external components to access this state. This can be achieved by creating a callback function, often referred to as a prop, to allow external components to interact with the DatePicker. Here's an example:

const DatePicker = ({ maxDate = maxDateValue, log = true, consumeDate = () => {} }) => {
  const [value, setValue] = React.useState(() => {
    consumeDate(new Date()); // Expose the initial value
    return new Date();
  });
  if (log) console.log('Date picker value...', value);

  return (
    <Container>
      <Calendar
        value={value}
        onChange={(vl) => {
          setValue(vl);
          consumeDate(vl); // Expose the updated value
        }}
        minDate={new Date()}
        maxDate={maxDate}
      />
    </Container>
  );
};

In this example, the DatePicker component provides a consumeDate prop that external components can use to access the internal state of the component. This approach facilitates sharing the component's state and opens the door to numerous possibilities.

Here's how this works:

The consumeDate prop is passed to the DatePicker component, which is a function that can be defined in any parent component.

Inside the DatePicker component, this function is called during initialization and whenever the date value changes. This allows external components to observe the initial and updated values.

The onChange event of the Calendar component triggers the update of the internal state (value) in the DatePicker. It also calls consumeDate, exposing the new value.

README : add viewport meta tag

Aneesh — Thu, 14 Sep 2023 05:12:25 +0000

What happens without the viewport meta tag?

Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

This mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px, for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design technique.

What is the purpose of the viewport meta tag?

The viewport meta tag mitigates this problem of virtual viewport on narrow screen devices.

The width=device-width part sets the width of the page to follow the screen width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Mastering the Art of Flash Card Study: A Fun and Effective Learning Technique

Aneesh — Wed, 13 Sep 2023 07:00:21 +0000

Flash cards are simple tools that can be created using paper and pen or digitally through software like PowerPoint. They offer a dynamic and engaging way to learn, making the process not only efficient but also enjoyable. In this blog post, we will explore how to use flash cards effectively for studying and why they are a valuable addition to your study routine.

Creating Flash Cards

Choose Your Format: Flash cards can be made on paper or digitally using software like PowerPoint. Both methods have their advantages. Paper cards are tactile and can be carried anywhere, while digital cards offer the convenience of easy access and customization.
Question and Answer: The fundamental principle of a flash card is to have a question on one side and the answer on the other. Keep your questions clear and concise.
Utilize PowerPoint: If you're using PowerPoint, create a default slide layout where you put the question in the title field and the answer in the text field. To enhance the learning experience, you can animate the slides so that the question appears first and then reveal the answer when you're ready.

The Benefits of Flash Card Study

Active Learning: Flash cards turn passive reading into an active learning experience. Instead of passively reading through pages of text, you engage with the material by recalling and testing your knowledge.
Enhanced Memorization: Flash cards are particularly effective for memorizing essential facts and concepts. For instance, questions like "How do we represent pseudo-classes in CSS?" are ideal for flash cards. You don't need to include all the intricate details; the goal is to capture the basics.
Spaced Repetition: Revisiting flash cards at intervals helps reinforce your memory. It leverages the concept of spaced repetition, which optimizes learning by reviewing material at increasing intervals over time. This method improves long-term retention.
Focus on Outlines: While learning, it's essential to understand the fundamental concepts. Flash cards can help you remember the outlines of what you've studied, even if you forget the finer details. This ability to recall the basics is valuable when tackling complex subjects.

Conclusion

Incorporating flash cards into your study routine can make the learning process more enjoyable and efficient. They promote active learning, enhance memorization of essential facts, and leverage spaced repetition to improve retention. Remember that the main purpose of flash cards is to capture basic facts and outlines. Understanding the fundamental concepts and allowing your brain to forget them, only to revisit and relearn them, is a powerful technique for long-term retention.

So, whether you're a student preparing for exams or someone looking to expand your knowledge, consider incorporating flash cards into your learning toolkit. They're a simple yet effective way to make your study sessions more engaging and productive. Happy learning!

A simple way to deal with closure over a stale state in React code

Aneesh — Fri, 08 Sep 2023 08:08:19 +0000

 const [stateA, setStateA] = React.useState('A');

  React.useEffect(() => {
    setInterval(() => {
      if (stateA === 'A') {
        doSomething();
      } else {
        doSomethingElse();
      }
    }, [60000]);
  });

In the above code stateA is a React state which can change based on user actions but the reference to stateA withint the callback of setInterval remains always set to the value "A" which is problematic.

Why does this happen? The setInterval callback captures the value of stateA when it is created, and it does not automatically update when stateA changes. This is known as a closure over a stale state.

We can tackle this issue by using a ref. Here is how.

  const [stateA, setStateA] = React.useState('A');

  const stateARef = React.useRef(null);
  stateARef.current = stateA;

  React.useEffect(() => {
    setInterval(() => {
      if (stateARef.current === 'A') {
        doSomething();
      } else {
        doSomethingElse();
      }
    }, [60000]);
  });

What is happening here?

In this version, we create a stateARef using React.useRef(), and then immediately assign the current value of stateA to stateARef.current. By doing this, we ensure that stateARef.current always reflects the latest value of stateA, even within the setInterval callback.

How to detect if a website is running on a webview?

Aneesh — Fri, 08 Sep 2023 07:22:00 +0000

Step 1 - Customise the userAgent string of the webview. Below is an example from React-Native

<WebView
  userAgent={"web-view-user-agent-123"}   
  ref={"WEBVIEW"} 
  automaticallyAdjustContentInsets={false}
  source={{ uri: this.state.url }}
/>

In this example, we're setting the UserAgent to "web-view-user-agent-123". This is the UserAgent that will be sent with HTTP requests made by the WebView.

Step 2 - read this userAgent string in the client side code of the website.

We can read the userAgent string in the client side code of the website by

if (window.navigator.userAgent === "web-view-user-agent-123") {
  console.log("the website is embedded in a webview");
} else {
  console.log("the website is not in a webview");
}

Conclusion:

This simple yet powerful technique can be used in various scenarios, such as tracking user activity, implementing custom logic, or providing a personalized experience to users within your WebView.

Possible reasons for slow page transitions in NextJS

Aneesh — Thu, 31 Aug 2023 04:29:08 +0000

Page transitions in Next.js can take longer than expected for several reasons. It's important to analyze and address potential bottlenecks to optimize the performance of your Next.js application. Here are some common reasons and possible solutions:

Slow Server-Side Rendering (SSR) or Generation:

If your pages have complex rendering logic, require heavy data fetching, or involve a lot of dynamic content, they might take longer to render. Consider optimizing your data fetching methods, using memoization, and improving your server's response time.

Inefficient Data Fetching:

Data fetching methods like getServerSideProps, getStaticProps, or useEffect on the client-side can impact performance. Ensure that you're only fetching the data that's essential for the initial view and avoid unnecessary fetching or computations.

Large Assets:

Large images, videos, or other media assets can slow down page loading. Optimize and compress your assets to reduce their size and improve loading times.

Slow API Calls:

If your page relies on external APIs, slow responses from these APIs can delay page rendering. Consider implementing caching strategies, error handling, and loading indicators to provide a better user experience.

JavaScript Bundle Size:

A large JavaScript bundle can slow down client-side rendering. Use code splitting and dynamic imports to load only the necessary JavaScript for a specific page. Additionally, minify and gzip your JavaScript files.

Client-Side Rendering (CSR) Delays:

If you heavily rely on CSR, it might take time for JavaScript to execute and render on the client side, especially if the client has slower devices or limited resources. Consider using server-side rendering or static site generation for better performance.

Third-Party Libraries:

Third-party libraries can impact your page performance. Evaluate whether all libraries are necessary and if there are lighter alternatives that can be used.

Poorly Optimized CSS:

Large or unoptimized CSS files can slow down page rendering. Use techniques like critical CSS, CSS minification, and CSS-in-JS to optimize your styles.

Network Latency:

High network latency can affect the time it takes to load assets, data, and resources. Use CDNs and server locations closer to your target audience to reduce network latency.

Server Load and Scaling:
If your server is overloaded or not appropriately scaled, it can lead to slow rendering times. Monitor your server's performance, and consider using tools like load balancers and autoscaling.

Simple custom hook to figure out which state change triggered an effect in React

Aneesh — Thu, 17 Aug 2023 06:05:37 +0000

In React applications, the useEffect hook is a powerful tool for handling side effects and component lifecycle events. However, sometimes you might find it useful to know which specific props triggered an useEffect callback. This can be particularly handy when dealing with optimizations or debugging. In this blog post, we'll explore a custom hook named useWhichPropsChanged that allows you to easily identify the props responsible for triggering an useEffect call.

The Custom Hook - useWhichPropsChanged:

import React from 'react';

const useWhichPropsChanged = (initialProps) => {
  const propsRef = React.useRef(initialProps);
  return (currentProps) => {
    const pKeys = Object.keys(propsRef.current);
    pKeys.forEach((ele) => {
      if (propsRef.current[ele] !== currentProps[ele]) {
        console.log(`prop ${ele} has changed...`);
      }
    });
    propsRef.current = currentProps;
  };
};

Using the Hook in a Component:

import React, { useEffect } from 'react';

const Component = (props) => {
  const { propsRequiredForSomeApiCall } = props;
  const whichPropsChanged = useWhichPropsChanged(propsRequiredForSomeApiCall);

  useEffect(() => {
    whichPropsChanged(propsRequiredForSomeApiCall);
    // Perform some API call or other side effects
  }, [propsRequiredForSomeApiCall]);

  return <></>;
};

How It Works:
The useWhichPropsChanged hook utilizes React's useRef to store a reference to the previous props. The returned function takes the current props as an argument and iterates over the keys of the stored props. If the current value of a prop differs from the stored value, a log message is generated indicating which prop has changed. After processing, the stored props are updated to match the current props, allowing for future comparisons.

DEV Community: Aneesh

Understanding useSyncExternalStore Through Some Examples

Polyfill for Array.isArray

Polyfill for a function to check if a value is a string!

How I Optimized Huys Kitchen's Website by Serving Images with Exact Size

Enhancing SEO with Slugs: A Better Approach for URL Composition

The Challenge: Choosing the Right Field

Using id: SEO Unfriendly

Using name: Potential Pitfalls

The Solution: Introducing Slugs

Advantages of Using Slugs

Conclusion

A Simple Way to Expose Internal Component State in React

README : add viewport meta tag

Mastering the Art of Flash Card Study: A Fun and Effective Learning Technique

A simple way to deal with closure over a stale state in React code

How to detect if a website is running on a webview?

Possible reasons for slow page transitions in NextJS

Simple custom hook to figure out which state change triggered an effect in React

Using `id`: SEO Unfriendly