Console.log se ejecuta dos veces. Debajo dijo que es para razonar Strict Mode :
React Hooks: useEffect() se llama dos veces incluso si se usa una matriz vacía como argumento
StrictMode representa los componentes dos veces (en desarrollo pero no en producción) para detectar cualquier problema con su código y advertirle sobre ellos (lo que puede ser muy útil).
¡Pero no entiendo por qué! Dice: in order to detect any problems with your code and warn you about them . Pero cual es el problema? ¿Y advertir sobre qué cosa?
¿Y hay alguna manera de deshacerse de eso (dos veces en ejecución) sin eliminar el Strict Mode de la aplicación?
es mi codigo:
import {useEffect, useState} from "react"; import BlogList from "./BlogList"; const Home = () =>{ const [blogs, setBlogs] = useState([ { title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 }, { title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 }, { title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 } ]); const [name, setName] = useState('mario'); const handleDelete = (id) => { const newBlogs = blogs.filter(blog => blog.id !== id); setBlogs(newBlogs); } useEffect(() => { console.log("useEffect is run"); console.log(name); },[name]); return( <div className="Home"> <BlogList blogs={blogs} title="All Blogs" handleDelete={handleDelete} /> <button onClick={() => setName('arman')}>Delete name</button> <p>{name}</p> </div> ); } export default Home;El código completo:
StrictMode representa los componentes dos veces para detectar cualquier problema con su código durante el desarrollo. Deberías estar bien en producción. Si absolutamente no desea el procesamiento doble, simplemente elimine la etiqueta.
El modo estricto no puede detectar automáticamente los efectos secundarios, pero puede ayudarlo a detectarlos haciéndolos un poco más deterministas.
Nota: Esto solo se aplica al modo de desarrollo. Los ciclos de vida no se invocarán dos veces en el modo de producción.