50 Most Useful React Snippets

1. Functional Component (Basic)

import React from 'react';

const MyComponent = () => {
  return <h2>Hello, World!</h2>;
};

export default MyComponent;

2. Functional Component with Props

import React from 'react';

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

export default Greeting;

3. Class Component

import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return <p>Hello from Class Component</p>;
  }
}

export default MyClassComponent;

---

II. State Management with Hooks

4. useState for Counter

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
};

export default Counter;

5. useState with Object

import React, { useState } from 'react';

const Profile = () => {
  const [user, setUser] = useState({ name: 'John', age: 25 });
  return (
    <>
      <p>{user.name} - {user.age}</p>
      <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
        Aging...
      </button>
    </>
  );
};

export default Profile;

6. useEffect on Mount

import React, { useEffect } from 'react';

const Hello = () => {
  useEffect(() => {
    console.log('Mounted!');
  }, []);

  return <p>Hello Effect</p>;
};

export default Hello;

7. useEffect with Fetch

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

const FetchUser = ({ id }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
      .then(res => res.json())
      .then(setUser);
  }, [id]);

  if (!user) return <p>Loading...</p>;
  return <p>{user.name}</p>;
};

export default FetchUser;

8. useContext for Theme

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const ThemeButton = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Theme: {theme}
    </button>
  );
};

9. useRef Focus Input

import React, { useRef } from 'react';

const FocusInput = () => {
  const inputRef = useRef();
  return (
    <>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </>
  );
};

export default FocusInput;

10. useCallback

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

const Button = React.memo(({ onClick }) => <button onClick={onClick}>+</button>);

const App = () => {
  const [count, setCount] = useState(0);
  const inc = useCallback(() => setCount(c => c + 1), []);
  return <><p>{count}</p><Button onClick={inc} /></>;
};

export default App;

11. useMemo

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

const Expensive = ({ n }) => {
  const result = useMemo(() => {
    let res = 0;
    for (let i = 0; i < n * 100000; i++) res += i;
    return res;
  }, [n]);

  return <p>{result}</p>;
};

export default Expensive;

12. useReducer

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'inc': return { count: state.count + 1 };
    case 'dec': return { count: state.count - 1 };
    default: return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'inc' })}>+</button>
      <button onClick={() => dispatch({ type: 'dec' })}>-</button>
    </>
  );
};

export default Counter;

---

III. Conditional Rendering

13. With &&

{isLoggedIn && <p>Welcome!</p>}

14. With Ternary

{isAdmin ? <p>Admin Panel</p> : <p>User Panel</p>}

15. With Switch-like Logic

const Status = ({ code }) => {
  switch (code) {
    case 200: return <p>Success</p>;
    case 400: return <p>Error</p>;
    default: return <p>Unknown</p>;
  }
};

---

IV. List Rendering

16. Map Over Array

<ul>
  {items.map(i => <li key={i.id}>{i.name}</li>)}
</ul>

17. Nested Lists

{data.map(cat => (
  <div key={cat.id}>
    <h3>{cat.name}</h3>
    <ul>
      {cat.items.map(it => <li key={it}>{it}</li>)}
    </ul>
  </div>
))}

---

V. Event Handling

18. onClick Handler

<button onClick={() => alert('Clicked!')}>Click</button>

19. Input Change

<input value={text} onChange={e => setText(e.target.value)} />

20. Prevent Form Submit

<form onSubmit={e => { e.preventDefault(); save(); }}>
  <button>Save</button>
</form>

---

VI. Forms

21. Controlled Input

<input value={value} onChange={e => setValue(e.target.value)} />

22. Multiple Inputs

<input name="username" onChange={e => setForm({...form, [e.target.name]: e.target.value})} />

23. Checkbox Group

<input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} />

24. Form Reset

<button onClick={() => setForm(initial)}>Reset</button>

---

VII. Styling

25. Inline Style

<div style={{ color: 'red', padding: 10 }}>Styled Text</div>

26. Conditional Class

<div className={isActive ? 'active' : 'inactive'}>Status</div>

27. CSS Modules

import styles from './Button.module.css';
<button className={styles.primary}>Click</button>

---

VIII. Component Patterns

28. Higher-Order Component

const withLogger = Comp => props => {
  console.log(props);
  return <Comp {...props} />;
};

29. Render Props

const Mouse = ({ children }) => {
  const [pos, setPos] = useState({x:0,y:0});
  return <div onMouseMove={e => setPos({x:e.clientX,y:e.clientY})}>
    {children(pos)}
  </div>;
};

30. Custom Hook

const useWindowWidth = () => {
  const [w, setW] = useState(window.innerWidth);
  useEffect(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return w;
};

---

IX. Error Handling

31. Error Boundary

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) return <h3>Error Occurred</h3>;
    return this.props.children;
  }
}

---

X. Performance & Optimization

32. React.memo

const MyComp = React.memo(({ value }) => <p>{value}</p>);

33. Lazy Loading

const LazyComp = React.lazy(() => import('./LazyComp'));
<Suspense fallback={<p>Loading...</p>}>
  <LazyComp />
</Suspense>

34. Dynamic Import

import('./math').then(module => module.add(2,3));

---

XI. Miscellaneous

35. Fragment

<>
  <p>One</p>
  <p>Two</p>
</>

36. Children Prop

const Card = ({children}) => <div className="card">{children}</div>;

37. Spread Props

<input {...props} />

38. forwardRef

const MyInput = React.forwardRef((props, ref) => <input ref={ref} {...props} />);

39. useId (for accessibility)

const id = useId();
<label htmlFor={id}>Name</label>
<input id={id} />

40. useLayoutEffect

useLayoutEffect(() => { console.log('DOM ready'); }, []);

41. useImperativeHandle

useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() }));

42. Portals

ReactDOM.createPortal(<Modal />, document.getElementById('modal-root'));

43. Suspense with Data

<Suspense fallback={<p>Loading...</p>}>
  <Profile />
</Suspense>

44. useTransition

const [isPending, start] = useTransition();

45. useDeferredValue

const deferred = useDeferredValue(value);

46. Debounce with useEffect

useEffect(() => {
  const id = setTimeout(() => search(query), 500);
  return () => clearTimeout(id);
}, [query]);

47. Throttling Scroll

useEffect(() => {
  const onScroll = throttle(() => setY(window.scrollY), 200);
  window.addEventListener('scroll', onScroll);
  return () => window.removeEventListener('scroll', onScroll);
}, []);

48. Key Press Hook

const useKey = (key, cb) => {
  useEffect(() => {
    const handler = e => e.key === key && cb();
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [key, cb]);
};

49. Dark Mode Hook

const useDarkMode = () => {
  const [dark, setDark] = useState(false);
  useEffect(() => {
    document.body.classList.toggle('dark', dark);
  }, [dark]);
  return [dark, setDark];
};

50. Custom Fetch Hook

const useFetch = url => {
  const [data, setData] = useState(null);
  useEffect(() => { fetch(url).then(r => r.json()).then(setData); }, [url]);
  return data;
};