Dchole

/**
 * Core issues
 * 1) The Suspense component has no fallback component
 * 2) Fetching data with useEffect causes the component to render before fetching the data
 * 3) Data was fetched outside the suspense. Data needs to be handled by Suspense it therefore should be fetched inside the Suspense 
 */

function getUserProfile(userId) {
  return {
    profile: wrapPromise(fetchUserProfile(userId))

Dchole

import { useEffect, useRef } from "react"

/**
 * @callback requestCallback
 * @param {any[]} args - arguments passed into callback
 */
/**
 * Debounce function to reduce number executions
 * @param {requestCallback} cb - callback function to be executed
 * @param {number} wait - number of milliseconds to delay function execution

Dchole

// Usage
import ButtonLink from "@/components/ButtonLink"

function App() {
  return (
    <ButtonLink
      href="/store"
      variant="contained"
      color="primary"
      endIcon={<StoreIcon />}

Dchole

<main>
 <input type="file" name="image" id="image" accept="image/*" />
    <div id="preview">
      <div id="avatar"></div>
      <button
        id="upload-button"
        aria-labelledby="image"
        aria-describedby="image"
      >
        🙂

Dchole

import Axios from "axios";

const DISPLAY = document.querySelector("pre");
const FETCH_BTN = document.querySelector("#fetch");
const AXIOS_BTN = document.querySelector("#axios");

const API = "http://localhost:1337/posts";

let error;

Dchole

import { useEffect, useState } from "react";

export type TDevice = "mobile" | "desktop";

const useDevice = () => {
  const [device, setDevice] = useState<TDevice>("mobile");

  useEffect(() => {
    const { userAgent } = navigator;
    userAgent.includes("Mobi") ? setDevice("mobile") : setDevice("desktop");

Dchole

{
  "Basic useEffect hook": {
    "prefix": "ueh",
    "body": ["useEffect(() => {$2}, [$1])"],
    "description": "Basic useEffect hook without return function"
  },
  "Custom Hook": {
    "prefix": "ch",
    "body": [
      "const use${1:$TM_FILENAME_BASE} = () => {",

Dchole

// Context API for device
import { createContext, useEffect, useState } from "react";

export type TDevice = "mobile" | "desktop";

export const DeviceContext = createContext<TDevice>("mobile");

const DeviceContextProvider: React.FC = ({ children }) => {
  const [device, setDevice] = useState<TDevice>("mobile");

Dchole

const BUTTON = document.querySelector("button");

const { userAgent } = window.navigator;

// Set device to "mobile" if "Mobi" exists in userAgent else set device to "desktop"
const device = userAgent.includes("Mobi") ? "mobile 📱" : "desktop 💻";

BUTTON.addEventListener("click", () => alert(`You are on ${device}`));