En el fragmento de código a continuación, me gustaría sacar esta función de jsx y envolverla en useCallback.
{suggestedTags.length ? ( <div className={classes.tagSuggestionWrapper}> {suggestedTags.map((tag) => { return (<div key={tag} onClick={() => { selectTag(tag) }}>{tag}</div> ); })} </div> ) : null }De lo contrario, se crea una nueva función para cada elemento en cada renderizado.
Entiendo que esto puede complicar el código y puede no ser recomendable. Pero tengo que hacerlo. pido tu consejo
Tu puedes hacer:
const selectTag = useCallback((tag) => { setTags((prevState) => [...prevState, tag]); setSuggestedTags([]); setInput(""); }, []) Tenga en cuenta que si hubiera usado alguna variable de estado o accesorio, debería haberla incluido en la matriz de dependencia. Una matriz de dependencias vacía asegura que la referencia selectTag permanecerá igual una vez que se monte el componente.
Y ninguna matriz de dependencia es lo mismo que no usar useCallback en absoluto
Puede eliminar la función de flecha pasando el valor mediante la función de evento onClick :
const selectTag = (event) => { const tag = event.target.name setTags((prevState) => [...prevState, tag]); setSuggestedTags([]); setInput(""); } return ( {suggestedTags.length ? ( <div className={classes.tagSuggestionWrapper}> {suggestedTags.map((tag) => { return (<div key={tag} name={tag} className={classes.tagSuggestion} onClick={selectTag}>{tag}</div> ); })} </div> ) : null } </div> );