10 Useful React Snippets I Reuse in Almost Every Project

Squid Studio — Wed, 12 Aug 2026 10:56:51 +0000

10 Useful React Snippets I Reuse in Almost Every Project

When working on React projects, I often find myself writing the same small pieces of code again and again.

Here are 10 simple React snippets that can save time in everyday development.

1. useDebounce

Useful when working with search inputs, filters, or API requests.

import { useEffect, useState } from "react";

function useDebounce(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

This prevents an API request from running on every keystroke.

2. useLocalStorage

A simple way to persist state in the browser.

import { useEffect, useState } from "react";

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

This can be useful for preferences, themes, filters, and other client-side settings.

3. usePrevious

Sometimes you need to know what a value was before the latest render.

import { useEffect, useRef } from "react";

function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}

4. useClickOutside

Useful for dropdowns, modals, menus, and popups.

import { useEffect } from "react";

function useClickOutside(ref, callback) {
  useEffect(() => {
    function handleClick(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        callback();
      }
    }

    document.addEventListener("mousedown", handleClick);

    return () => {
      document.removeEventListener("mousedown", handleClick);
    };
  }, [ref, callback]);
}

5. useMediaQuery

Useful when a component needs to respond to screen size.

import { useEffect, useState } from "react";

function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);

    const update = () => setMatches(media.matches);

    update();
    media.addEventListener("change", update);

    return () => media.removeEventListener("change", update);
  }, [query]);

  return matches;
}

Example:

const isMobile = useMediaQuery("(max-width: 768px)");

6. useToggle

A small hook for boolean state.

import { useState } from "react";

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => setValue((current) => !current);

  return [value, toggle];
}

Perfect for menus, modals, accordions, and visibility states.

7. Copy to Clipboard

You don't always need a library for copying text.

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    return false;
  }
}

Example:

await copyToClipboard("Hello React!");

8. Format API Errors

Keeping API errors consistent makes frontend code easier to maintain.

function getErrorMessage(error) {
  if (error instanceof Error) {
    return error.message;
  }

  return "Something went wrong";
}

Then:

try {
  await fetchData();
} catch (error) {
  console.error(getErrorMessage(error));
}

9. Generate a Unique ID

For simple client-side use cases:

function generateId() {
  return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
}

For security-sensitive identifiers, use a cryptographically secure approach instead.

10. Conditional Class Names

For small projects, a simple helper can be enough:

function cn(...classes) {
  return classes.filter(Boolean).join(" ");
}

Example:

const className = cn(
  "button",
  isActive && "button-active",
  disabled && "button-disabled"
);

Final Thoughts

These snippets are small, but having reusable patterns ready can save a surprising amount of development time.

I’m building a collection of reusable React, Next.js, JavaScript, Tailwind CSS, and Regex snippets at SnippetCrafted.

If you have a React snippet you use constantly, share it in the comments. I'd love to see what other developers are reusing in their projects.

How I Built a Timed Quiz Platform with 400+ Questions

Squid Studio — Mon, 13 Jul 2026 11:49:05 +0000

I wanted to build a quiz app that felt fast no loading spinners, no account walls, no backend lag between questions. Just pick a category, pick a difficulty, and start answering. Here's how I approached building QuizOxa, a free quiz platform with 8 categories and 3 difficulty levels, and a few of the technical decisions that shaped it.

The core challenge: making quizzes feel instant

Most quiz apps I'd used before had a common problem every question click hit an API, added a delay, and broke the flow. I wanted question delivery to feel closer to a game than a form.

My approach:

Preload the full question pool for a category client-side once, instead of fetching per-question
Shuffle and slice the question set on the client using a simple Fisher-Yates shuffle, so every playthrough feels different
Keep state (score, streak, timer) entirely in local component state no server round-trip needed until the quiz ends

function shuffleArray(array) {
  var arr = array.slice();
  for (var i = arr.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr;
}

This alone removed almost all perceived lag between questions.

Timer logic: the trickiest part

Each difficulty level needed a different countdown (30s / 20s / 15s) with points scaling accordingly (100 / 150 / 200 pts). The tricky part wasn't the timer itself it was making sure:

The timer resets cleanly between questions without visual flicker
A timeout is treated as a wrong answer, resets the streak, and still shows the explanation (so users learn even when they fail)

I used a setInterval tied to component lifecycle with cleanup on unmount/question-change to avoid memory leaks and timer overlap bugs, a classic gotcha in countdown timers.

Explanations after every answer, right or wrong

One decision that mattered a lot for retention: showing a short explanation after every answer, not just wrong ones. This turns the app from "test my knowledge" into "actually learn something," which matters if you want people to come back.

Sharing results without needing accounts

No login system, instead, I generate a shareable result summary (score, accuracy, category) as plain text and hook it into the Web Share API for mobile, with a WhatsApp deep link fallback:

var shareText = "I scored " + score + " points on " + category + " quiz! Can you beat me? " + quizUrl;
var whatsappUrl = "https://wa.me/?text=" + encodeURIComponent(shareText);

This turned out to be a surprisingly effective, zero-cost growth loop, no ad spend, just organic shares.

What I'd do differently

If I rebuilt this today, I'd add:

Local storage-based streak tracking across sessions (currently resets per session)
A lightweight analytics layer to see which questions people get wrong most, to improve question quality over time

Try it

If you want to see the shuffle/timer/scoring system in action, the live version is running at QuizOxa, 8 categories, 400+ questions, no sign-up needed.

DEV Community: Squid Studio

10 Useful React Snippets I Reuse in Almost Every Project

10 Useful React Snippets I Reuse in Almost Every Project

1. useDebounce

2. useLocalStorage

3. usePrevious

4. useClickOutside

5. useMediaQuery

6. useToggle

7. Copy to Clipboard

8. Format API Errors

9. Generate a Unique ID

10. Conditional Class Names

Final Thoughts

How I Built a Timed Quiz Platform with 400+ Questions

The core challenge: making quizzes feel instant

Timer logic: the trickiest part

Explanations after every answer, right or wrong

Sharing results without needing accounts

What I'd do differently

Try it