Hello guys !
I just need a quick review of two implementation for translation using context provider.

Why do I make a provider while I can just pass translation from server component ?
In some case, I can have multiple client components and it's annoying to pass each param down the tree, that's why..
But if you have any other suggestion, I'm all listening ! 😄

So here is the two possible implementation, what do you think ?
First doesn't care of position and handle it by it self.
Second need a specific position in layout since it require params from server component.

Also I'm not good at testing so I really don't know what solution is the most efficient !
Thanks for reading.

//fetch needed translation
export default function TranslationProvider({ children }:{children: React.ReactNode}) {

    const [translation, setTranslation] = useState(null)
    const { locale } = useParams()

    useEffect(() => {
        //getClientTranslations(locale)
    }, [locale])
 
    return (
        <translationContext.Provider value={{}}>
            {children}
        </translationContext.Provider>
    )

}

//translation from server
export default function TranslationProvider({translation, children }) {
    
    return (
        <translationContext.Provider value={{translation}}>
            {children}
        </translationContext.Provider>
    )
}