SOLVED: I ended up making a context.jsx and a provider.jsx, which seems kinda weird to me, but what do i know im just a jr.

Hello! I'm trying to learn to use contexts but i get this warning "Fast refresh only works when a file only exports components. Move your component(s) to a separate file."

I get it, its because im exporting twice. But how should i do it correctly? 2 files? One for context and one for provider??

This is my context.jsx, then i have a Cart.jsx where i plan to use it, and a Layout.jsx that wraps the outlet with the context

import {useState, createContext } from "react";

export const CartContext = createContext()

export function CartProvider({children}){
    const [cart, setCart] = useState([])

    const handleCart = (new) =>{
        setCart((prevCart) => [...prevCart, new])
    }

    return(
        <CartContext.Provider value={{cart, handleCart }}>
            {children}
        </CartContext.Provider>
    )
}

I've been getting "Fast Refresh had to perform a full reload. See https://nextjs.org/docs/basic-features/fast-refresh#how-it-works" warnings in my dev logs and it'd be nice to not.

I'm going to guess the culprit is exporting the props types along with the component. However, I'm guilty of doing this a lot and refactoring would be a pain unless I know it is in fact the issue.

Is there a good way to determine the actual cause? a lint rule? a verbose log?