Hey there! Ditching full page reloads is a smart move—React’s whole design is about updating only the parts of the UI that change, so let’s refactor your code to work the React way instead of relying on window.location.reload().

First, let’s break down what your current code is doing: when you click the button, you toggle the liked state, and if favProduct exists, you refresh the page. That refresh is probably meant to sync some external state (like whether the product is favorited in your backend or a shared store) — we can replace that with React’s native state management and data fetching patterns.

Option 1: Update Local State Directly #

If favProduct is stored in your component’s local state (or a parent component’s state), you can update that state directly to trigger a re-render. Here’s how to adjust your code:

// Assume these are your component's state variables
const [liked, setLiked] = useState(false);
const [favProduct, setFavProduct] = useState(/* your initial value */);

const handleLikeClick = () => {
  const newLikedState = !liked;
  setLiked(newLikedState);

  // Update favProduct to reflect the new liked status
  if (favProduct) {
    // Create a new object (don't mutate the original state!)
    setFavProduct(prevFav => ({
      ...prevFav,
      isLiked: newLikedState // Match your actual property name here
    }));
  }
};

// Update your button's onClick handler
return product ? (
  <div>
    <div>
      <img src={product.images[0]} alt={product.title} />
    </div>
    <div>
      {product.title} <br /> ${product.price} <br /> {product.description}
    </div>
    <div>
      <button onClick={handleLikeClick}>
        <Icon size="28px" />
      </button>
    </div>
  </div>
) : <p>Loading Product... </p>;

React will automatically re-render the component when liked or favProduct changes—no page refresh required.

Option 2: Re-fetch Data from Your API #

If favProduct comes from a backend API (meaning the favorite status is stored server-side), you’ll want to re-fetch the latest data after updating the favorite status. Here’s a clean pattern using useEffect:

const [liked, setLiked] = useState(false);
const [favProduct, setFavProduct] = useState(null);
// State to trigger a re-fetch when needed
const [shouldRefreshFav, setShouldRefreshFav] = useState(false);

// Fetch favProduct whenever shouldRefreshFav changes
useEffect(() => {
  const fetchFavoriteProduct = async () => {
    const res = await fetch(`/api/favorites/${product.id}`); // Replace with your API endpoint
    const data = await res.json();
    setFavProduct(data);
    // Sync local liked state with server data
    setLiked(data.isLiked);
  };

  fetchFavoriteProduct();
}, [shouldRefreshFav, product.id]);

const handleLikeClick = async () => {
  // First, send the update to your backend
  await fetch(`/api/favorites/${product.id}/toggle`, {
    method: 'POST', // Or PUT/DELETE, based on your API design
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ liked: !liked })
  });

  // Toggle local state immediately for a snappy UI
  setLiked(prev => !prev);
  // Trigger a re-fetch to get the latest server data
  setShouldRefreshFav(prev => !prev);
};

This approach updates the server first, syncs your local state for instant feedback, then pulls the latest data—all without reloading the page.

Option 3: Use Global State Management (For Shared State) #

If the favorite status is used across multiple components (like a nav bar showing favorite counts), use a global state solution like React Context or Redux. Here’s a quick example with Context:

Step 1: Create a Favorites Context #

// src/contexts/FavoritesContext.js
import { createContext, useContext, useState } from 'react';

const FavoritesContext = createContext();

export const FavoritesProvider = ({ children }) => {
  const [favorites, setFavorites] = useState([]);

  const toggleFavorite = (product) => {
    setFavorites(prev => {
      const isFavorited = prev.some(fav => fav.id === product.id);
      if (isFavorited) {
        return prev.filter(fav => fav.id !== product.id);
      } else {
        return [...prev, product];
      }
    });
    // Add your API sync call here if needed
  };

  return (
    <FavoritesContext.Provider value={{ favorites, toggleFavorite }}>
      {children}
    </FavoritesContext.Provider>
  );
};

export const useFavorites = () => useContext(FavoritesContext);

Step 2: Use the Context in Your Component #

import { useFavorites } from '../contexts/FavoritesContext';

// Inside your product component
const { favorites, toggleFavorite } = useFavorites();
const liked = favorites.some(fav => fav.id === product.id);

const handleLikeClick = () => {
  toggleFavorite(product);
};

Now, when you click the button, the global favorites state updates, and every component using useFavorites will automatically re-render with the latest data.

Key Takeaway #

The core idea here is leveraging React’s state-driven rendering: instead of forcing a full page refresh, update the relevant state (local, fetched from API, or global) and let React handle re-rendering only the parts that need to change. It’s faster, smoother, and aligns with how React is intended to work.

内容的提问来源于stack exchange，提问作者alejandro