Realmente depende de los estándares y convenciones que utilice su empresa/proyecto. A veces, las funciones de flecha en línea están permitidas, otras veces es una regla estricta definir una función, en cuyo caso generalmente usa una plantilla handleEvent .

En el caso de una regla estricta contra las declaraciones de funciones en línea, tiene varias soluciones:

1. Evite este problema por completo absteniéndose de las trampas booleanas .
2. Cambie el nombre handleFocus y luego cree funciones handleFocus y handleBlur que llamen a esa función.
3. Use un Reducer que handleFocus y handleBlur , cada uno con una acción diferente. (En mi opinión, no es la mejor solución para un problema de tan pequeña escala)

El foco de entrada será verdadero o falso. Simplemente puede pasar la función del controlador a los oyentes, y como sabe que siempre habrá solo dos estados, simplemente puede actualizar el estado con la inversión del estado booleano actual.

Si hay otros argumentos que cree que necesitará pasar, tiendo a adjuntar los datos a los atributos de datos en el elemento y luego los desestructura desde el conjunto de datos en el controlador.

 const { useEffect, useState } = React; function Example() { const [focus, setFocus] = useState(false); function handleFocus(e) { const { text } = e.target.dataset; console.log(text); setFocus(!focus); } useEffect(() => { console.log(`Focused? ${focus}`); }, [focus]); return ( <input data-text="This is an example" onFocus={handleFocus} onBlur={handleFocus} /> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>

No sé si entendí bien tu pregunta, pero esta es mi opinión:

Se trata solo de cómo pasar parámetros y aún así hacer que los controladores funcionen al devolver otra función

 const CustomInput = () => { const [focused, setFocused] = useState(false); const handleFocus = (isFocus) => () => { /** * Some Conditions to check */ setFocused(isFocus); }; return ( <input onFocus={handleFocus(true)} onBlur={handleFocus(false)} /> ); };

En cuanto a las optimizaciones:

Si su componente se vuelve a renderizar, su función se "recreará" de cualquier manera. Ahí debe decidir si la optimización es realmente necesaria (sin optimizaciones prematuras) y si la necesita tanto, se logra de otras maneras:

1. extrayendo la función del componente
2. usando useCallback (useMemo)
3. componente de envoltura en React.memo()

etc...

Puedes jugar con un ejemplo aquí: https://codesandbox.io/s/friendly-greider-oph1f?file=/src/App.tsx