Estoy aprendiendo React y tengo un Contexto personalizado accesible con un método de uso:
// In a Provider file. export const useUsefulObject(): UsefulObject { return useContext(...) } Quiero usar UsefulObject en una devolución de llamada de clic en otro archivo. Para mayor comodidad, tengo esa devolución de llamada envuelta en un método someLogic .
const PageComponent: React.FC = () => { return <Button onClick={(e) => someLogic(e)} />; } function someLogic(e: Event) { const usefulObject = useUsefulObject(); usefulObject.foo(e, ...); }Sin embargo, VS Code advierte que llamar a useUsefulObject en someLogic es una violación de las reglas de los ganchos, ya que se llama fuera de un método de componente.
Puedo pasar el objeto (¡el siguiente código funciona!) pero parece que anula el punto de Contextos para evitar todo el paso. ¿Hay una mejor manera que esta?
const PageComponent: React.FC = () => { const usefulObject = useUsefulObject(); return <Button onClick={(e) => someLogic(e, usefulObject)} />; } function someLogic(e: Event, usefulObject) { usefulObject.foo(e, ...); }Es necesario llamar a los ganchos mientras se procesa el componente, por lo que su última idea es una de las formas posibles de hacerlo. Otra opción es que puede crear un enlace personalizado que acceda al contexto y cree la función someLogic:
const PageComponent: React.FC = () => { const someLogic = useSomeLogic(); return <Button onClick={(e) => someLogic(e)} /> } function useSomeLogic() { const usefulObject = useUsefulObject(); const someLogic = useCallback((e: Event) => { usefulObject.foo(e, ...); }, [usefulObject]); return someLogic; }