Pieces 🌟

Posted on May 14 • Originally published at code.pieces.app

10 React Code Snippets that Every Developer Needs

In React development, the principle of reusability holds significant importance. The ability to craft generic functions and components that can be reused not only streamlines code refactoring but also adheres to the fundamental principle “Don't Repeat Yourself” (DRY). This approach not only enhances React code efficiency and maintainability but also increases productivity by saving valuable time.

As developers, we frequently encounter components that warrant reuse across various projects. For instance, a generic button component with consistent properties might be needed in multiple pages or applications. While manually copying and pasting components across projects might seem like a quick fix, it can lead to unnecessary errors and inefficiency. This is where the practice of saving React code snippets proves invaluable. By storing these reusable code fragments, developers can expedite future development tasks.

However, there's a caveat to this approach. As the repository of saved snippets grows, it can become unwieldy, making it challenging to navigate and maintain. To address this issue, employing a dedicated code snippet management tool becomes imperative. Such tools facilitate organized storage and retrieval of snippets, thereby enhancing developer efficiency and project scalability. This article explores the importance of saving and managing code snippets using a snippet management tool and some essential code snippets that you can use in any React project.

What is React?

React is a front-end library that is based on JavaScript. It is maintained by teams at Meta, and commonly used to build user interfaces. ReactJS can be combined with other frameworks, like Next.js, to create mobile and server-rendered applications, among other uses. Check out the React docs to learn more.

Why You Need a Snippet Management Tool

A snippet management tool is a software application designed to help developers store, organize, manage, and retrieve their code snippets effectively. It serves as an indispensable asset for developers by facilitating version control and collaboration among team members. While this is not a replacement for documentation like the Reactjs docs, maintaining your own snippet repository is an excellent way to enhance your personal workflow. Here are some major reasons why every developer needs one:

Efficiency: With a snippet management tool, developers can quickly access and insert commonly used code snippets into their projects without the need to rewrite them from scratch. This saves significant time and effort during development, allowing developers to focus more on solving problems and building features rather than repetitive tasks.
Consistency: By storing and organizing code snippets in a central repository, developers can ensure consistency across projects. This means using the same reliable and tested code snippets repeatedly, reducing the risk of errors and inconsistencies in codebases. It also helps maintain uniform coding standards and practices across teams and projects.
Knowledge Sharing: Snippet management tools enable developers to share useful code snippets with their team members or the broader developer community. This fosters collaboration and knowledge sharing within teams and across organizations, as developers can benefit from each other's expertise and solutions to common coding challenges.
Learning and Growth: As developers accumulate and organize code in their snippet management tool, they also build a valuable resource for learning and personal growth. By reviewing and reusing snippets, developers can deepen their understanding of coding patterns, best practices, and advanced techniques. Over time, this continuous learning process enhances their skills and makes them more proficient developers.

Introducing Pieces

In this article, we will use Pieces to store the discussed React code. Pieces is not your ordinary snippet management tool; it's a powerhouse equipped with on-device AI that learns from your actions, automatically adding titles, descriptions, related links, and more. With a plethora of outstanding features, Pieces is a must-have tool for every developer. These features include:

Snippet Management: Effortlessly save and store various developer resources such as code snippets, scratch files, and screenshots.
AI-Enabled Features: Pieces includes an on-device copilot that assists in capturing, enriching, and reusing materials. It streamlines collaboration and solves complex problems through a contextual understanding of workflows.
Extensions and Plugins: Compatible with VS Code, GitHub, web browsers, Microsoft Teams, and more, allowing for enhanced developer materials across workflows and improved AI capabilities.
Personal Copilot: Pieces' copilot and code capture feature enable saving, sharing, generating, and understanding code snippets and concepts. This boosts productivity during online research and problem-solving endeavors.

Pieces revolutionizes the way developers manage and utilize their resources.

10 Essential React Code Snippets

As a React developer, there are components or code snippets that you may need to reuse multiple times. Let’s take a look at some React example code as you’re getting started with React. Here are some of the major, most-used React code components:

1. Functional Component with Props

Description: A fundamental building block in React apps that creates reusable UI components.
Use case: Displaying a message passed as a prop.
Code snippet:

import React from 'react';

  const MyComponent = (props) => {
    return <div> {props.message} </div>;
  };

  export default MyComponent;

Save this code

2. List Rendering

Description: Renders items in a list, mostly from an API or database, to be displayed on the user interface.
Use case: Displaying a list of items.
Code snippet:

import React from 'react';

const List = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default List;

Save this code

3. Forms

Description: React code that handles forms and input submission.
Use case: Creating a form for user input.
Code snippet:

import React, { useState } from 'react';

const Form = () => {
const [value, setValue] = useState('');

  const handleChange = (e) => setValue(e.target.value);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

Save this code

4. Custom Hooks

Description: Creates a hook for reusing stateful logic.
Use case: Fetching data from an API with reusable logic.
Code snippet:

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      setLoading(false);
    };

    fetchData();
  }, [url]);

  return { data, loading };
};

export default useFetch;

Save this code

5. Modal Component

Description: A component for displaying overlay modals.
Use case: Displaying a notification modal.
Code Snippet:

import React from 'react';

const Modal = ({ isOpen, onClose, children }) => {
  return isOpen ? (
    <div className="modal">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  ) : null;
};

export default Modal;

Save this code

6. Tabs Component

Description: A tab component for switching between different content.
Use Case: Implementing tabbed navigation for different sections of a page
Code Snippet:

import React, { useState } from 'react';

const Tabs = ({ tabs }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div className="tabs">
      {tabs.map((tab, index) => (
        <div
          key={index}
          className={`tab ${index === activeTab ? 'active' : ''}`}
          onClick={() => setActiveTab(index)}
        >
          {tab.title}
        </div>
      ))}
      <div className="tab-content">{tabs[activeTab].content}</div>
    </div>
);
};

export default Tabs;

Save this code

7. Image Slider Component

Description: An image slider for displaying multiple images.
Use case: Image carousel
Code snippet:

import React, { useState } from 'react';

const ImageSlider = ({ images }) => {
 const [currentIndex, setCurrentIndex] = useState(0);
  const nextSlide = () => setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1));
  const prevSlide = () => setCurrentIndex((prevIndex) => (prevIndex === 0 
images.length - 1 : prevIndex - 1));

  return (
    <div className="slider">
      <button onClick={prevSlide}>Prev</button>
      <img src={images[currentIndex]} alt="Slide" />
      <button onClick={nextSlide}>Next</button>
    </div>
  );
};

export default ImageSlider;

Save this code

8. Button Component

Description: Reusable button component in React code.
Use case: A UI button component that accepts different props.
Code snippet:

import React from 'react';
import PropTypes from 'prop-types';

const Button = ({ type, className, children, ...props }) => {
  return (
    <button
      type={type}
      className={className}
      {...props}
    >
      {children}
    </button>
  );
};

Button.propTypes = {
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
  className: PropTypes.string,
  children: PropTypes.node.isRequired,
};

Button.defaultProps = {
  type: 'button',
  className: '',
};

export default Button;

Save this code

9. Loading Spinner Component

Description: A reusable loading spinner to simulate a loading effect.
Use case: Show loading spinner when data from an API is yet to arrive.
Code Snippet:

import React from 'react';

const Spinner = ({ size, color }) => {
  const spinnerStyle = {
    width: size,
    height: size,
    borderTopColor: color,
    borderLeftColor: 'transparent',
    animation: 'spin 1s linear infinite',
    borderWidth: '2px',
    borderStyle: 'solid',
    borderRadius: '50%',
  };

  return (
    <div className="inline-block animate-spin" style={spinnerStyle}></div>
  );
};

Spinner.defaultProps = {
  size: '6',
  color: 'rgba(59, 130, 246, 1)',
};

export default Spinner;

Save this code

10. Dropdown Component

Description: A component for selecting options.
Use case: Select options based on a filter or category.
Code snippet:

import React from 'react';

const Dropdown = ({ options, onSelect }) => {
  return (
    <select onChange={(e) => onSelect(e.target.value)}>
      {options.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

export default Dropdown;

Save this code

Conclusion

In this article, we've covered some handy React code snippets that can save you time and effort in your projects. But why stop there? Create and save your favorite snippets to avoid reinventing the wheel and keep your solutions organized. Ready to boost your productivity? Download the Pieces desktop app to start building your personal snippet library. And don't forget to check out our blog for more developer-related insights.

Let’s code smarter, not harder. Happy coding!