Parth Raval

Posted on Jun 26

📘 30 Most Useful React Snippets

#react #reactjsdevelopment #programming #javascript

I. Basic Component Structures

Functional Component (Basic):

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <p>Hello from MyComponent!</p>
    </div>
  );
};

export default MyComponent;

Functional Component with Props:

import React from 'react';

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

export default Greeting;

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

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;

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;

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;

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;

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>

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;

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;

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;

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

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;

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

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

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;

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

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

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;

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

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!" />

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;

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

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

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

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

Fragment for returning multiple elements:

import React from 'react';

const MyFragmentComponent = () => {
  return (
    <>
      <p>First paragraph</p>
      <p>Second paragraph</p>
    </>
  );
};

export default MyFragmentComponent;

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;

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

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;

DEV Community