React Best Practices and Patterns

React has become the go-to library for building user interfaces. Let's explore some best practices and patterns that will help you write better React code.

1. Functional Components

Modern React emphasizes the use of functional components with hooks:

// Good Practice
const UserProfile = ({ user }) => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div>
      <h2>{user.name}</h2>
      {isEditing ? (
        <EditForm user={user} />
      ) : (
        <DisplayInfo user={user} />
      )}
    </div>
  );
};

2. Custom Hooks

Extract reusable logic into custom hooks:

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  return [storedValue, setStoredValue];
};

3. Performance Optimization

Memoization

Use React.memo and useMemo wisely:

const ExpensiveComponent = React.memo(({ data }) => {
  return (
    // Expensive rendering logic
  );
});

useCallback

Optimize callback functions:

const handleSubmit = useCallback((data) => {
  // Handle form submission
}, [/* dependencies */]);

4. State Management

Choose the right state management approach:

• Use local state for simple components
• Context API for shared state
• Redux/Zustand for complex applications

const AppContext = createContext();

const AppProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  
  return (
    <AppContext.Provider value={{ theme, setTheme }}>
      {children}
    </AppContext.Provider>
  );
};

5. Error Boundaries

Implement error boundaries to handle runtime errors:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Conclusion

Following these React best practices will help you:

• Write more maintainable code
• Improve performance
• Reduce bugs
• Create better user experiences

Remember to keep your components small, focused, and reusable!