Как переместить вызываемую функцию в useEffect?

Question

[Danoneko]

Постоянная ошибка "React Hook useEffect has a missing dependency: 'userData'. Either include it or remove the dependency array react-hooks/exhaustive-deps"

В интернете предложили, переместить функцию внутрь хука. Я новичок в react, и не знаю как это исправить, если функция handleChange вызывается ниже. Подскажите пожалуйста как это сделать?

import data from "../Data/data";

const userData = data;
const [users, setUsers] = useState([]);
const [selectedUser, setSelectedUser] = useState([]);

  useEffect(() => {
    setUsers(userData);
  }, []);

  // console.log('selectedUser);


  const handleChange = (e, data) => {
    const { name, checked } = e.target;
    if (checked) {
      if (name === "allSelect") {
        setSelectedUser(users);
      } else {
        setSelectedUser([...selectedUser, data]);
      }
    } else {
      if (name === "allSelect") {
        setSelectedUser([]);
      } else {
        let tempuser = selectedUser.filter((item) => item.id !== data.id);
        setSelectedUser(tempuser);
      }
    }
  };

return(
<input
                    type="checkbox"
                    className="form-check-input"
                    name="allSelect"
                    // allSelect selected when both length equal
                    // slecteduser === allUser
                    checked={selectedUser?.length === users?.length}
                    onChange={(e) => handleChange(e, users)}
                  />
)

Answer 1

[Alexandroppolus]

если data просто импортируется, то выкинуть useEffect и написать
const [users, setUsers] = useState(data);

Answer 2

[sevenov_elevenov]

Это не совсем ошибка, это ворнинг линтера, он говорит что для useEffect нужно указать зависимость от userData:

useEffect(() => {
    setUsers(userData);
  }, [userData]);

Comments

[Danoneko]

Да, но тогда превышается максимальная глубина 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.