React error in console – Maximum update depth exceeded when input length is more than 5

I have an input component that accepts input upto 5 characters. When the input length is more that 5, it shows a message Limit Exceeds (only upto 5 characters accepted).

Sample component code :

import { useEffect, useState } from "react";

export function ConditionalInput() {

  const [inputInfo, setInputInfo] = useState({ value: "", lengthCount: 0 });
  const [warningMessageVisible, setWarningMessageVisible] = useState(false);

  useEffect(() => {
    if (inputInfo.value.length > 5) {
      setInputInfo((s) => ({ ...s, lengthCount: 0 }));
    }
  }, [inputInfo, warningMessageVisible]);

  const onChange = ({ target }) => {
    setInputInfo((s) => ({ ...s, value: target.value }));
    if (target.value.length > 5) {
      setWarningMessageVisible(true);
    }
  };
  
  return (
    <div>
      <input type="text" value={inputInfo.value} onChange={onChange} />
      <div>Number of secrets: {inputInfo.lengthCount}</div>
      {warningMessageVisible && (
        <h3>Limit Exceeds (only upto 5 characters accepted)</h3>
      )}
    </div>
  );
}

On the UI everything looks ok but in the console I can see an error message printing in an infinite loop stating – Maximum update depth exceeded

Note – Above code is not the actual code I’m using but a mock of it. It have the same error and working

How can I fix this error showing in console? any advise or answer is appreciated

>Solution :

You need to do the following changes in your code :

• remove inputInfo from useEffect dependencies
• instead of using infoInput.lengthCount use infoInput.value.length to show the length count.

Below is the working code

import { useEffect, useState } from "react";

export function ConditionalInput() {

  const [inputInfo, setInputInfo] = useState({ value: "", lengthCount: 0 });
  const [warningMessageVisible, setWarningMessageVisible] = useState(false);

  useEffect(() => {
    if (inputInfo.value.length > 5) {
      setInputInfo((s) => ({ ...s, lengthCount: 0 }));
    }
  }, [warningMessageVisible]);

  const onChange = ({ target }) => {
    setInputInfo((s) => ({ ...s, value: target.value }));
    if (target.value.length > 5) {
      setWarningMessageVisible(true);
    }
  };

  return (
    <div>
      <input type="text" value={inputInfo.value} onChange={onChange} />
      <div>Number of secrets: {inputInfo.value.length}</div>
      {warningMessageVisible && (
        <h3>Limit Exceeds (only upto 5 characters accepted)</h3>
      )}
    </div>
  );
}