Error ReactJs : Maximum update depth exceeded

fateme barzegar 0
Viewed 16

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

I got this error but I did not use any useEffect . I just wrote a function to update the input value and when I click on the button to search the input value, this error occurs. Do you have any solution?

import "./SearchInput.css";
import Search from "../../../assets/Images/icon/search-normal.svg";
import { Navigate } from "react-router";
import { React, useRef, useState, createContext } from "react";
import { useAppContext } from "../../../Context/SearchContext/SearchContext";

const SearchInput = (props) => {
  const [inputChange, setInputChanage] = useState("");
  const [fireNavigate, setFireNavigate] = useState(false);
  const inputRef = useRef(null);

  const { setSearchValue } = useAppContext();

  const inputChangeHandler = (event) => {
    setInputChanage(event.target.value);
  };

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      setFireNavigate(true);
      setSearchValue(inputRef.current.value);
      console.log(inputRef.current.value);
    }
  };

  const handleClick = () => {
    setFireNavigate(true);
    setSearchValue(inputRef.current.value);
  };

  return (
    <div className="search-input-container">
      <input
        className="search-input"
        ref={inputRef}
        onChange={inputChangeHandler}
        value={inputChange}
        type="text"
        onKeyDown={handleKeyDown}
        placeholder={props.placeholder}
      />
      <button className="search-icon" onClick={handleClick}>
        <img src={Search} width="100%" height="100%" alt="search icon" />
      </button>
      {fireNavigate ? <Navigate to="/search" /> : null}
    </div>
  );
};

export default SearchInput;
react-hooks reactjs
1 Answers

When you set fireNavigate to true, you now render a <Navigate to='/search'/> element. The purpose of this element is to do a useEffect which redirects to the /search page. But once the browser gets there, SearchInput renders again and fireNavigate is still true. So you render the Navigate element again, which redirects again, and the loop repeats.

If you're using version 6 of react-router, i recommend deleting the fireNavigate state and the <Navigate> element, and using the useNavigate hook instead:

import { useNavigate } from 'react-router';

const SearchInput = (props) => {
  const navigate = useNavigate();
  // ...

  const handleClick = () => {
    setSearchValue(inputRef.current.value);
    navigate('/search'); // <-- do the navigate right now, once.
  };

  return (
    <div className="search-input-container">
      <input
        className="search-input"
        ref={inputRef}
        onChange={inputChangeHandler}
        value={inputChange}
        type="text"
        onKeyDown={handleKeyDown}
        placeholder={props.placeholder}
      />
      <button className="search-icon" onClick={handleClick}>
        <img src={Search} width="100%" height="100%" alt="search icon" />
      </button>
    </div>
  );
}

If you're using version 5, then useHistory can do something similar.

Nicholas Tower0
Related