useReducer与useState的功能差异及Firestore数据渲染异常原因问询

大家好，我最近碰到个挺费解的问题，想跟各位请教下：

我把产品详情数据存在Firestore里，自己封装了一个自定义Hook来拉取这些数据，需求是根据URL参数里的分类值，展示对应类别的产品卡片。结果最近新增了几个分类页面后，怪事发生了：页面挂载的时候产品卡片完全不渲染；但如果我去编辑ProductCard组件的代码，卡片会闪一下出来，然后瞬间又消失了。

更奇怪的是，控制台里完全没有报错，而且我能确认数据已经被正确获取到了，甚至渲染的那一秒也是正常的，但就是留不住。我猜会不会是状态管理出了问题，但一直没找到根因。

补充：后来我抱着试试的心态，把自定义Hook里的useState换成了useReducer，结果问题居然彻底解决了！这就让我更懵了——按说useState和useReducer不都是用来管理组件状态的吗？为啥useReducer能正常工作，useState就不行？会不会是因为我产品详情的数据结构太复杂导致的？

下面是我用useState写的自定义Hook的核心代码片段（原本代码有截断，但核心逻辑是用useState管理Firestore返回的产品数据）：

const useProductData = (category) => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const querySnapshot = await getDocs(
          query(collection(db, 'products'), where('category', '==', category))
        );
        const productList = querySnapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setProducts(productList);
        setLoading(false);
      } catch (err) {
        console.error('Fetch error:', err);
        setLoading(false);
      }
    };

    fetchData();
  }, [category]);

  return { products, loading };
};

备注：内容来源于stack exchange，提问作者Fathima M.