Pinned Loading

1. useMediaQuery & useBreakpoints hooks... useMediaQuery & useBreakpoints hooks for handling conditional rendering on multiple breakpoints (Adapted for Next.js)

   1

   // -------------------------

   2

   // useMediaQuery

   3

   4

   import { useState, useEffect, useLayoutEffect } from "react";

   5

2. How to implement debounce How to implement debounce

   1

   // #1. With a controlled input

   2

   import { useState, useEffect } from 'react';

   3

   const debounce = require("lodash.debounce");

   4

   5

   function SearchBar({ onSearch, wait = 500 }) {

3. workaround aspect-ratio safari workaround aspect-ratio safari

   1

   import { useRef, useEffect, useState } from "react";

   2

   3

   export default function Test() {

   4

     const [height, setHeight] = useState(0);

   5

     const ref = useRef<HTMLDivElement>(null);

4. GraphQL with Vanilla JavaScript GraphQL with Vanilla JavaScript

   1

   const api = axios.create({

   2

     baseURL: "xxx/graphql",

   3

     method: "POST",

   4

     headers: { "Content-Type": "application/json" },

   5

   });