Implementing Serverless Functions in React Applications

---
description: Enforce best practices for integrating serverless functions to handle backend logic in React applications
globs: ["src/**/*.jsx", "src/**/*.tsx"]
tags: [react, serverless, best-practices]
priority: 2
version: 1.0.0
---

# Implementing Serverless Functions in React Applications

## Context
- Applicable when integrating serverless functions to manage backend logic in React applications.
- Assumes familiarity with React and serverless architectures.

## Requirements
- **Function Design**: Ensure serverless functions are small, focused, and stateless to enhance scalability and maintainability.
- **Error Handling**: Implement robust error handling within serverless functions, logging errors efficiently for proactive issue identification.
- **Performance Optimization**: Optimize serverless functions by minimizing dependencies and managing function timeouts appropriately to reduce latency and costs.
- **Security Measures**: Apply the principle of least privilege by granting functions only the permissions they require, and encrypt sensitive data both at rest and in transit.
- **Monitoring and Logging**: Enable detailed logging and monitoring to track function performance and detect anomalies promptly.
- **Testing**: Conduct thorough unit and integration testing of serverless functions to ensure reliability and prevent regressions.
- **CI/CD Integration**: Implement Continuous Integration and Continuous Deployment pipelines to automate testing and deployment processes for serverless functions.

## Examples

<example>

// Good: Small, focused, and stateless serverless function
exports.handler = async (event) => {
  const { id } = event.queryStringParameters;
  const data = await fetchDataFromDatabase(id);
  return {
    statusCode: 200,
    body: JSON.stringify(data),
  };
};
</example>

<example type="invalid">

// Bad: Large function handling multiple tasks and maintaining state
let state = {};
exports.handler = async (event) => {
  // Validation logic
  // Database operations
  // Business logic
  // Response construction
  state.lastProcessed = Date.now();
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Success" }),
  };
};
</example>