📘 30 Most Useful React Snippets

I. Basic Component Structures

1. Functional Component (Basic):
   

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

2. Functional Component with Props:
   

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

3. Class Component (Basic):
   

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

---

II. State Management with Hooks

1. useState for simple state:
   

   import React, { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> </div> ); }; export default Counter; 

2. useState with object state:
   

   import React, { useState } from 'react'; const UserProfile = () => { const [user, setUser] = useState({ name: 'John Doe', age: 30 }); const updateAge = () => { setUser(prevUser => ({ ...prevUser, age: prevUser.age + 1 })); }; return ( <div> <p>Name: {user.name}</p> <p>Age: {user.age}</p> <button onClick={updateAge}>Happy Birthday!</button> </div> ); }; export default UserProfile; 

3. useEffect for side effects (on mount/unmount):
   

   import React, { useEffect, useState } from 'react'; const Timer = () => { const [seconds, setSeconds] = useState(0); useEffect(() => { const intervalId = setInterval(() => { setSeconds(prevSeconds => prevSeconds + 1); }, 1000); // Cleanup function return () => clearInterval(intervalId); }, []); // Empty dependency array means it runs once on mount and cleans up on unmount return ( <div> <p>Seconds: {seconds}</p> </div> ); }; export default Timer; 

4. useEffect with dependencies:
   

   import React, { useEffect, useState } from 'react'; const 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(json => { setData(json); setLoading(false); }); }, [userId]); // Reruns when userId changes if (loading) return <p>Loading data...</p>; return <pre>{JSON.stringify(data, null, 2)}</pre>; }; export default DataFetcher; 

5. useContext for global state (simple example):
   

   import React, { createContext, useContext, useState } from 'react'; const ThemeContext = createContext(null); const ThemeProvider = ({ children }) => { const [theme, setTheme] = useState('light'); const toggleTheme = () => setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light')); return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> {children} </ThemeContext.Provider> ); }; const ThemeButton = () => { const { theme, toggleTheme } = useContext(ThemeContext); return ( <button onClick={toggleTheme}>Toggle Theme ({theme})</button> ); }; // Usage: // <ThemeProvider> // <ThemeButton /> // </ThemeProvider> 

6. useRef for direct DOM access or mutable values:
   

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

7. useCallback for memoizing functions:
   

   import React, { useState, useCallback } from 'react'; const Button = React.memo(({ onClick, children }) => { console.log('Button rendered'); return <button onClick={onClick}>{children}</button>; }); const ParentComponent = () => { const [count, setCount] = useState(0); // This function will only be recreated if `count` changes const handleClick = useCallback(() => { setCount(prevCount => prevCount + 1); }, []); // Empty dependency array means it's memoized once return ( <div> <p>Count: {count}</p> <Button onClick={handleClick}>Increment Count</Button> </div> ); }; export default ParentComponent; 

8. useMemo for memoizing expensive calculations:
   

   import React, { useState, useMemo } from 'react'; const ExpensiveCalculation = ({ value }) => { const result = useMemo(() => { console.log('Performing expensive calculation...'); let sum = 0; for (let i = 0; i < value * 1000000; i++) { sum += i; } return sum; }, [value]); // Recalculates only when 'value' changes return ( <div> <p>Value: {value}</p> <p>Result of expensive calculation: {result}</p> </div> ); }; const App = () => { const [input, setInput] = useState(10); return ( <div> <input type="number" value={input} onChange={(e) => setInput(parseInt(e.target.value))} /> <ExpensiveCalculation value={input} /> </div> ); }; export default App; 

9. useReducer for complex state logic:
   

   import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; case 'reset': return { count: 0 }; default: throw new Error(); } } const CounterWithReducer = () => { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: 'increment' })}>Increment</button> <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button> <button onClick={() => dispatch({ type: 'reset' })}>Reset</button> </div> ); }; export default CounterWithReducer; 

---

III. Conditional Rendering

1. Conditional rendering with &&:
   

   import React from 'react'; const UserGreeting = ({ isLoggedIn }) => { return ( <div> {isLoggedIn && <h2>Welcome back!</h2>} {!isLoggedIn && <h2>Please log in.</h2>} </div> ); }; export default UserGreeting; 

2. Conditional rendering with ternary operator:
   

   import React from 'react'; const AdminPanel = ({ isAdmin }) => { return ( <div> {isAdmin ? ( <p>Welcome, Admin!</p> ) : ( <p>You do not have administrative access.</p> )} </div> ); }; export default AdminPanel; 

---

IV. List Rendering

1. Basic list rendering with map and key:
   

   import React from 'react'; const ItemList = ({ items }) => { return ( <ul> {items.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }; export default ItemList; 

---

V. Event Handling

1. Inline arrow function for event handler:
   

   import React from 'react'; const MyButton = () => { const handleClick = () => { alert('Button clicked!'); }; return ( <button onClick={handleClick}>Click Me</button> ); }; export default MyButton; 

2. Passing event object to handler:
   

   import React, { useState } from 'react'; const InputField = () => { const [text, setText] = useState(''); const handleChange = (event) => { setText(event.target.value); }; return ( <input type="text" value={text} onChange={handleChange} placeholder="Type here..." /> ); }; export default InputField; 

---

VI. Forms

1. Controlled input component:
   

   import React, { useState } from 'react'; const MyForm = () => { const [value, setValue] = useState(''); const handleChange = (e) => { setValue(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); console.log('Submitted value:', value); setValue(''); // Clear input after submission }; return ( <form onSubmit={handleSubmit}> <input type="text" value={value} onChange={handleChange} /> <button type="submit">Submit</button> </form> ); }; export default MyForm; 

---

VII. Styling

1. Inline styles:
   

   import React from 'react'; const StyledDiv = () => { const divStyle = { color: 'blue', fontSize: '16px', border: '1px solid black', padding: '10px' }; return ( <div style={divStyle}> This text is styled inline. </div> ); }; export default StyledDiv; 

2. CSS Modules (example structure):
   

   // styles/MyComponent.module.css // .container { // background-color: lightgray; // padding: 20px; // } // .text { // color: green; // } // MyComponent.jsx import React from 'react'; import styles from './styles/MyComponent.module.css'; const MyComponent = () => { return ( <div className={styles.container}> <p className={styles.text}>Styled with CSS Modules</p> </div> ); }; export default MyComponent; 

---

VIII. Component Patterns

1. Higher-Order Component (HOC) - Basic:
   

   import React from 'react'; const withLogger = (WrappedComponent) => { return (props) => { console.log('Props:', props); return <WrappedComponent {...props} />; }; }; const MyPlainComponent = ({ message }) => <div>{message}</div>; const MyLoggedComponent = withLogger(MyPlainComponent); // Usage: <MyLoggedComponent message="Hello HOC!" /> 

2. Render Props Pattern:
   

   import React, { useState } from 'react'; const MouseTracker = ({ render }) => { const [position, setPosition] = useState({ x: 0, y: 0 }); const handleMouseMove = (event) => { setPosition({ x: event.clientX, y: event.clientY, }); }; return ( <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}> {render(position)} </div> ); }; const App = () => { return ( <MouseTracker render={({ x, y }) => ( <h1> The mouse position is ({x}, {y}) </h1> )} /> ); }; export default App; 

3. Custom Hook for reusable logic:
   

   import { useState, useEffect } from 'react'; const useWindowWidth = () => { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return width; }; const MyResponsiveComponent = () => { const width = useWindowWidth(); return ( <div> <p>Window width: {width}px</p> {width > 768 ? <p>Large screen</p> : <p>Small screen</p>} </div> ); }; export default MyResponsiveComponent; 

---

IX. Error Handling

1. Error Boundary (Class Component - for production apps):
   

   import React, { Component } from 'react'; class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false, error: null, errorInfo: null }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error("ErrorBoundary caught an error:", error, errorInfo); this.setState({ error, errorInfo }); } render() { if (this.state.hasError) { return ( <div> <h1>Something went wrong.</h1> {this.state.error && <details style={{ whiteSpace: 'pre-wrap' }}> {this.state.error.toString()} <br /> {this.state.errorInfo.componentStack} </details>} </div> ); } return this.props.children; } } // Usage: // <ErrorBoundary> // <MyProblematicComponent /> // </ErrorBoundary> 

---

X. Performance Optimization

1. React.memo for functional components:
   (See snippet 10: useCallback for an example of React.memo usage)

2. Lazy loading components with React.lazy and Suspense:
   

   import React, { lazy, Suspense } from 'react'; const LazyComponent = lazy(() => import('./LazyComponent')); const App = () => { return ( <div> <h1>My App</h1> <Suspense fallback={<div>Loading component...</div>}> <LazyComponent /> </Suspense> </div> ); }; export default App; 

---

XI. Miscellaneous

1. Fragment for returning multiple elements:
   

   import React from 'react'; const MyFragmentComponent = () => { return ( <> <p>First paragraph</p> <p>Second paragraph</p> </> ); }; export default MyFragmentComponent; 

2. Passing children as props:
   

   import React from 'react'; const Card = ({ title, children }) => { return ( <div style={{ border: '1px solid #ccc', padding: '15px', margin: '10px' }}> <h2>{title}</h2> {children} </div> ); }; const App = () => { return ( <Card title="My Awesome Card"> <p>This is some content inside the card.</p> <button>Click me!</button> </Card> ); }; export default App; 

3. Destructuring props for cleaner code:
   (See snippet 2: Functional Component with Props for an example of destructuring name from props)

4. Spreading props:
   

   import React from 'react'; const Input = ({ type, placeholder, ...rest }) => { return <input type={type} placeholder={placeholder} {...rest} />; }; const App = () => { return ( <Input type="text" placeholder="Enter your name" maxLength={50} style={{ border: '2px solid blue' }} onChange={(e) => console.log(e.target.value)} /> ); }; export default App;