Hay algunas preguntas con una redacción similar pero ninguna que me ayude.
Tengo un componente principal que quiere pasar una función a un componente secundario a través de Props, y el componente secundario ejecutará la función dentro de su lógica. Sin embargo, ESLint me devuelve el error "Los accesorios JSX no deben usar las funciones reaccionar/jsx-no-bind ". Entiendo que esto es ineficiente porque la función se volverá a crear cada vez que el componente se vuelva a renderizar. ¿Cuál sería la forma correcta de hacer esto?
Componente principal
function App() { const [recipes, setRecipes] = useState(sampleRecipes); function handleRecipeAdd() { const newRecipe = // some logic to create newRecipe here setRecipes([...recipes, newRecipe]); } return <RecipeList recipes={recipes} handleRecipeAdd={handleRecipeAdd} />; }Componente hijo
interface Props { handleRecipeAdd: () => void; } export default function RecipeList(props: Props) { const { handleRecipeAdd } = props; return ( <button onClick={handleRecipeAdd}> Add Recipe </button> ); }Tenga en cuenta que este no es el código exacto para ambos componentes, se ha simplificado para eliminar el código irrelevante.
Muchas gracias a Robin Zigmond por señalarme el lugar correcto para mirar, esto se resolvió con el enlace useCallback. Para cualquiera que esté interesado, así es como se ve el código actualizado:
Componente principal
function App() { const [recipes, setRecipes] = useState(sampleRecipes); const handleRecipeAdd = useCallback(() => { const newRecipe = // some logic to create newRecipe here setRecipes([...recipes, newRecipe]); }, [recipes]); return <RecipeList recipes={recipes} handleRecipeAdd={handleRecipeAdd} />; }