I need to share some state across components, so I decided to use a custom Context. Within that context, I’m calling a custom hook called useChat() that returns some state variables. However, is this the best practice? Or should I call useContext within useChat?

My state was originally all in the context, but I decided to pull it out into a hook useChat instead since it was getting quite long and unreadable. However, I’m not sure if this is a good pattern.

Throughout my components, I’m calling useContext(ChatContext). Should I consume the context within useChat instead and call useChat throughout my components?

type ChatContextType = { ... }

export const ChatContext = createContext<ChatContextType> ({ ... });

export const ChatProvider = ({ children }: any) => {
    { var1, var2, var3 } = useChat() // custom hook. is this best practice?
}