claps
claps copied to clipboard
Refactor Claps Component to Use Custom Hooks for Improved Modularity
Description
This PR introduces a series of refactorings to the Claps
component to improve its modularity. The primary focus was encapsulating the state and interaction logic into custom hooks.
Changes
-
Custom Hook for Data Fetching (
useClapData
):- Extracted data fetching logic into a custom hook, which is responsible for fetching clap data from the server and managing the loading state. This abstraction simplifies the main component structure and enhances the separation of concerns.
-
Custom Hook for Clap Interaction (
useClapSavingAndInteraction
):- Developed a new hook that encapsulates the functionality for handling clap interactions (PATCH requests) and local state updates related to user interactions (e.g., animation state, and clap count cache).
- This hook manages the states for
reaction
andcacheCount
, handling the complexities of updating these states internally based on the server's response.
-
Simplification of the Claps Component:
- With the heavy lifting moved into hooks, the main Claps component now primarily handles rendering and uses these hooks for all logic.