Почему не срабатывает проверка на первое монтирование?

Question

[HitGirl]

Здравствуйте!
Подскажите, пожалуйста, почему при первом монтировании useEffect выводит в консоль сначала false, а затем true, хотя deferredInput не изменяется. Как сделать, так чтобы onInputChanged, вызывался только при изменении deferredInput?

const Search = ({onInputChanged,placeholder="",className=""}:{onInputChanged:(input:string)=>any,className?:string,placeholder?:string})=>{
    const isMounted = useRef(false)
    const [searchInput, setSearchInput] = useState("")
    const deferredInput = useDeferredValue(searchInput)



    useEffect(()=>{
        console.log(isMounted.current)
        if (isMounted.current){
            onInputChanged(deferredInput)
        }
        else {
            isMounted.current = true
        }


    },[deferredInput])


    return (
        <Input
            placeholder={placeholder ? placeholder:"Найдётся всё..."}
            value={searchInput}
            onChange={(e)=>setSearchInput(e.target.value)}
            className={"w-full"+className}
        />
    )
}

export default Search;

Comments

[Kentavr16]

подскажи - что ты хочешь добиться использованием ref и defferedValue?

[HitGirl]

onInputChanged - выполняет поисковой запрос к серверу, и когда сайт загружается, он сразу отправляет его с пустой строкой. Я пытался использовать ref чтобы не выполнять запрос при монтировании. Наверное проще проверять на пустую строку в onInputChanged...

[Kentavr16]

HitGirl, первое - насколько я знаю реф имеет смысл если использовать его с dom-элементами. Посмотри примеры.
Дальше- в чем смысл const deferredInput = useDeferredValue(searchInput)? ты пробуешь отсрочить отправку запроса при вводе? тогда посмотри как реализуется debounce. Так твой запрос будет отправлен через установленное тобой время после того, как пользователь завершит ввод.
И да, конечно проще настроить условия, при которых будет делаться запрос, чем добавлять несколько хуков и изобретать велосипед. Каждый хук это ведь тоже определенная работа и выполнение логики для реакта. Не умножай сущности короче без причины.

[WbICHA]

Kentavr16,

первое - насколько я знаю реф имеет смысл если использовать его с dom-элементами

Нет.

[WbICHA]

почему при первом монтировании useEffect выводит в консоль сначала false, а затем true

Потому что в стрикт моде на деве юзЭффект вызывается дважды при первом рендере. Сделано для того, чтобы отлавливать подобные некорректные кейсы.
Как и сказал Kentavr16, используй дебоунс. И юзЭффект тут ненужен.

[HitGirl]

WbICHA, Да, но почему сначала false, затем true. А не два раза false. Получается useRef сохраняется даже после размонтирования.

[Kentavr16]

HitGirl, в комменте выше сказали - потому что юзэффект вызывается дважды. Скорее всего в строгом режиме и компонент рендерится дважды, деталей не знаю, не вникал. Но суть в том что так как изменения ты вносишь в самом юзэффекте, то при первом рендеринге фалс, при втором - тру. Можешь отключить стрикт мод (в index.js в него обернут компонент app) и второй лог пропадет. В теории останется только false, так как изменение рефа не должно тригерить ререндер. Либо если ты в функции onInputChanged изменяешь какой-либо стейт, то двойная запись останется, потому что это затригерит ререндер дочернего компонента.

[Kentavr16]

HitGirl, и здесь не происходит размонтирования. Размонтирование - это когда компонент убирается из dom-дерева. Ты же сейчас пытаешься отследить этап в жизненном цикле компонента.

Answer 1

[Kentavr16]

Если правильно понял желаемый результат - я бы сделал примерно так. Обрати внимание на то, как срабатывает сообщение в консоли.