React useEffect causing function to run 7 times. I am using a useCallback but it still runs to many times

Question

The updateAddedState function with the console.log("running") is running 7 times on a page refresh/initial render.

I only want the updateAddedState function to run once when the addedItems state updates.

I only what the useEffect to run when the actual addedItems state has changed. What am I doing wrong??

export const DropdownMultiSelect = ({
  data,
  placeholder,
  updateState,
}: IProps) => {
  const [searchTerm, setSearchTerm] = useState<string>("");
  const [filteredData, setFilteredData] = useState<IData[]>(data);
  const [addedItems, setAddedItems] = useState<IData[]>([]);
  const [placeholderValue, setPlaceholderValue] = useState<string>("");
  const [inputActive, setInputActive] = useState<boolean>(false);

  const onFocus = () => setInputActive(true);
  const onBlur = () => {
    setInputActive(false);
  };

  const updateAddedState = useCallback(() => {
    console.log("running");
    
    updateState(addedItems);
  }, [updateState, addedItems]);

  const handleFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value);
  };

  const handleFilterData = useCallback(
    (searchTerm: string) => {
      let newFilter = data.filter((value) => {
        return value.name.toLowerCase().includes(searchTerm.toLowerCase());
      });

      for (let i = 0; i < addedItems.length; i++) {
        for (let j = 0; j < newFilter.length; j++) {
          if (addedItems[i].id === newFilter[j].id) {
            newFilter.splice(j, 1);
          }
        }
      }

      setFilteredData(newFilter);
    },
    [addedItems, data]
  );

  const addItem = (value: IData) => {
    setAddedItems([...addedItems, value]);
    setSearchTerm("");
    handleFilterData("");
    setInputActive(false);
  };

  const removeItem = (value: IData, e: React.MouseEvent) => {
    e.preventDefault();
    let newArray: IData[] = [];

    for (let i = 0; i < addedItems.length; i++) {
      newArray.push(addedItems[i]);
    }

    for (let i = 0; i < newArray.length; i++) {
      if (value.id === newArray[i].id) {
        newArray.splice(i, 1);
      }
    }
    setAddedItems(newArray);
    setInputActive(true);
  };

  useEffect(() => {
    if (addedItems.length === 1) {
      setPlaceholderValue(`${addedItems.length} vald`);
    } else if (addedItems.length > 1) {
      setPlaceholderValue(`${addedItems.length} valda`);
    } else {
      setPlaceholderValue(placeholder);
    }
  }, [addedItems, placeholderValue, placeholder]);

  useEffect(() => {
    handleFilterData(searchTerm);
  }, [searchTerm, addedItems, handleFilterData]);

  useEffect(() => {
    let isMounted = true;
    if (isMounted) {
      if (addedItems) {
        updateAddedState();
      }
    }

    return () => {
      isMounted = false;
    };
  }, [updateAddedState, addedItems]);

  return (
    <div id="dropdownMulti">
      <section className="inputSection">
        <input
          type="text"
          placeholder={placeholderValue}
          className="inputSection__input"
          onChange={handleFilter}
          value={searchTerm}
          onFocus={onFocus}
          onBlur={onBlur}
        />
        <div className="inputSection__icon-container">
          {inputActive ? (
            <AiOutlineUpCircle
              onClick={() => setInputActive(false)}
              className="inputSection__icon-container--up"
            />
          ) : (
            <AiOutlineDownCircle className="inputSection__icon-container--down" />
          )}
        </div>
      </section>
      <section className="addedItems-section">
        {inputActive &&
          addedItems.map((addedItem) => {
            return (
              <div className="addedItem" key={addedItem.id}>
                <p className="addedItem__item">{addedItem?.name}</p>
                <button
                  data-testid="remove-btn"
                  className="addedItem__button"
                  onMouseDown={(e: React.MouseEvent) =>
                    removeItem(addedItem, e)
                  }
                >
                  <AiOutlineCloseCircle />
                </button>
              </div>
            );
          })}
      </section>
      {inputActive && (
        <ul className="dataResult">
          {filteredData.slice(0, 10).map((value) => {
            return (
              <li
                className="dataResult__item"
                key={value.id}
                tabIndex={0}
                onMouseDown={() => addItem(value)}
              >
                {value.name}
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
};

Any tips on how to cut the number of times it runs?

Please provide the components: AiOutlineCloseCircle, AiOutlineDownCircle, AiOutlineUpCircle And the Interfaces: IData, IProps — Paulo Fernando, Jul 08 '22 at 01:53
@PauloFernando they are just imported icons from react-icons. IData : {name: string, id: number} — Jesper Karlsson, Jul 08 '22 at 06:05
interface IProps { data: IData[]; placeholder: string; updateState: (value: IData[]) => void; } — Jesper Karlsson, Jul 08 '22 at 06:05

score 0 · Answer 1 · answered Jul 08 '22 at 20:06

0

Try to remove React Strict Mode, it makes components render twice only in development, not in production. Put back on if it's the case.

answered Jul 08 '22 at 20:06

Paulo Fernando

3,148
3
5
21

score 0 · Answer 2 · answered Feb 19 '23 at 13:22

Try removing updateState function from the dependency array of the useCallback function.

 const updateAddedState = useCallback(() => {
    console.log("running");
    
    updateState(addedItems);
  }, [addedItems]);

If it's still not working define the updateState function which comes with the props with the useCallback hook where the function is defined.

React useEffect causing function to run 7 times. I am using a useCallback but it still runs to many times

2 Answers2