Code Snippet Library

Discover reusable React components and code snippets for common tasks. Copy, paste, and accelerate your development.

Components

Basic Functional Component

A simple functional component structure.

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name || 'World'}!</h1>
    </div>
  );
}

export default MyComponent;

Components

Functional Component

JSX

Hooks

useState Hook Example

Demonstrates basic usage of the useState hook for managing local component state.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Hooks

useState

State Management

useEffect for Data Fetching

An example of using useEffect to fetch data when a component mounts.

import React, { useState, useEffect } from 'react';

function DataFetcher({ userId }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(userData => {
        setData(userData);
        setLoading(false);
      })
      .catch(error => {
        console.error("Error fetching data:", error);
        setLoading(false);
      });
  }, [userId]); // Re-run effect if userId changes

  if (loading) return <p>Loading...</p>;
  if (!data) return <p>No data found.</p>;

  return (
    <div>
      <h2>{data.name}</h2>
      <p>Email: {data.email}</p>
    </div>
  );
}

export default DataFetcher;

Hooks

useEffect

Data Fetching

API

Custom Hooks

Custom Hook for Form Input

A custom hook to manage form input state and changes.

import { useState } from 'react';

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

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value,
    onChange: handleChange,
  };
}

// Usage:
// function MyForm() {
//   const nameInput = useFormInput('');
//   return <input {...nameInput} />;
// }

export default useFormInput;

Custom Hooks

Custom Hook

Forms

State