Common React Code Snippets: A Handy Reference

Whether you’re just starting your journey with React or you’re a seasoned developer, having a set of common code snippets at your fingertips can be a real time-saver. In this blog post, we’ll explore some everyday React code snippets to help you in your development tasks.

1. Functional Component: The Foundation

Functional components are the cornerstone of React. They’re simple, functional, and perfect for building user interface elements.

import React from "react";
function MyComponent() {
  return <div> {/* Your component content */} </div>;
}
export default MyComponent;

import React from "react";

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;

3. Conditional Rendering: Show and Hide

React makes it easy to conditionally render elements, allowing you to show or hide components based on specific conditions.

{condition ? <ComponentA /> : <ComponentB />}

4. Mapping an Array: Creating Lists

When you need to render a list of items, the map function is your go-to tool.

{
  items.map((item) => <ListItem key={item.id} item={item} />);
}

5. Handling Events: User Interaction

Event handling is a fundamental aspect of web development. React makes it straightforward to handle events in your components.

function handleClick() {
  // Handle the click event here
}
<button onClick={handleClick}>Click me</button>;

6. Using State with useState: Dynamic Components

State management is essential for interactive components. React’s useState hook allows you to introduce state into your functional components.

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

7. Using useEffect for Side Effects: Smooth Interactions

When you need to manage side effects, like data fetching or animations, the useEffect hook is your ally.

import React, { useState, useEffect } from "react";
function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }, [seconds]);
  return <p>Seconds: {seconds}</p>;
}

8. Context API: Sharing Data

React’s Context API simplifies data sharing among components. You can create a context and provide it to your components.

const MyContext = React.createContext();
function MyProvider({ children }) {
  const value = "Some value";
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}
function MyComponent() {
  const data = React.useContext(MyContext);
  return <p>{data}</p>;
}

9. Using map for Conditional Rendering: Choose What to Display

Conditionally rendering elements using map lets you choose which components to show based on specific conditions.

{
  data.map((item) => item.condition && <Component key={item.id} data={item} />);
}

10. Handling Forms and Input: Interacting with Users

To handle form input and user interaction, create state variables and event handlers.

const [inputValue, setInputValue] = useState("");
function handleChange(event) {
  setInputValue(event.target.value);
}
<input type="text" value={inputValue} onChange={handleChange} />;

These common React code snippets should be valuable tools in your React development toolbox. Whether you’re building a simple app or a complex web application, they can help you streamline your development tasks and make your code more efficient. Happy coding!