50 Most Useful React Snippets

import React from 'react'; const MyComponent = () => { return <h2>Hello, World!</h2>; }; export default MyComponent; 

import React from 'react'; const Greeting = ({ name }) => <h1>Hello, {name}!</h1>; export default Greeting; 

import React, { Component } from 'react'; class MyClassComponent extends Component { render() { return <p>Hello from Class Component</p>; } } export default MyClassComponent; 

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; 

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; 

import React, { useEffect } from 'react'; const Hello = () => { useEffect(() => { console.log('Mounted!'); }, []); return <p>Hello Effect</p>; }; export default Hello; 

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; 

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> ); }; 

import React, { useRef } from 'react'; const FocusInput = () => { const inputRef = useRef(); return ( <> <input ref={inputRef} /> <button onClick={() => inputRef.current.focus()}>Focus</button> </> ); }; export default FocusInput; 

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; 

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; 

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; 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

const withLogger = Comp => props => { console.log(props); return <Comp {...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>; }; 

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; }; 

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; } } 

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

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

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

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

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

<input {...props} /> 

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

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

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

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

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

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

const [isPending, start] = useTransition(); 

const deferred = useDeferredValue(value); 

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

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

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

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

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