0

Tengo una lista que es repintada cada vez que introduzco un nuevo valor en el input, he intentado usar memo importado desde React. Como o donde podría ubicar este memo en mi código ya que no logro que este no reenderice cuando escribo en el input.

import React, { useState, useEffect, useCallback, memo} from 'react';
const NavBar = () => {

    const [text, setText] = useState([]);
    const [search, setSearch] = useState("");

    const url = 'http://localhost:3004/trabajadores';

    useEffect(() => {
       fetch(url)
        .then(response => response.json())
        .then(data => setText(data));
        
    }, [])
    
    const handleAdd = () => {
        const newText = { id: Date.now(), name: search}
        setText([...text,newText]);
    }

    const handleSearch = (e) => {
        setSearch(e.target.value);
    }

    const handleDelete = useCallback((nameId) => {
        setText(text.filter(txt => txt.id !== nameId));
    },[text])

    const handleFilter = text.filter(i =>{
        return i.name.toLowerCase().includes(search.toLowerCase());
    })

    console.log(text);

    return(
        <nav>
            <input 
            type="text" 
            value={search}
            onChange={(e) => handleSearch(e)}
            />
            <button onClick={handleAdd}>Add</button>
            {handleFilter.map((i => {
               return <p key={i.id}>{i.id}-{i.name}<button onClick={() => handleDelete(i.id)}>Delete</button></p>
            }))}
        </nav>
    );
}

export default NavBar;

3
  • ¿La App requiere ejecutar algún proceso mientras el usuario ingresa datos en el input? Saludos
    – g.4
    el 1 mar. 2021 a las 21:30
  • Nada en particular, simplemente para evitar ese renderizado excesivo
    – TALBARA
    el 3 mar. 2021 a las 8:18
  • se puede detener el render en cada keystroke si el input se configura como no controlado por ReactJS; en la propiedad value deja una asignación vacía value=""y remueve el método onChange pues como mencionas, no hace falta hacer nada mientras el usuario esta ingresando letras en el input.
    – g.4
    el 3 mar. 2021 a las 18:56

1 respuesta 1

0

El memo se utiliza para calcular algo se ejecutara dependiendo a lo que escucha, puedes mandar un array vacio para solo se ejecute una vez , o estados en el array para que escuche esos y se ejecute en cada cambio de esas dependencias, undefined para q se ejecute siempre en cada render, es como el useeffect solo que use memo se ejecuta en el momento del render, en cambio useeffect se ejecuta despues del render y usememo se puede usar como una funcion para recalcular sin causar un re-render.

Se crea el use memo como crear una funcion handle de un buttonclick osea una constante dentro del componenten funcional.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.