В вашем first useEffect
, repositories
- это ваше состояние массива. Не функция.
Кроме того, в вашем second useEffect
вам нужно внести коррективы в способ доступа к prevState в хуках.
Исправлено для 1-го использования. Эффект
export default function Main() {
const [newRepo, setNewRepo] = useState('');
const [repositories, setRepositories] = useState([]);
const [clearInput] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const localRepoItems = localStorage.getItem('repositories');
if (localRepoItems) {
setRepositories(JSON.parse(localRepoItems));
}
}, []); // do not give the dependency as repositories as it will go to infinite loop
});
Чтобы получить предыдущее состояние в хуках, вы можете написать небольшой пользовательский хук: Например:
export const usePrevious = value => {
const ref = React.useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
Использование в вашем компоненте:
const prevRepositories = usePrevious(repositories);
useEffect(() => {
if (prevRepositories.length !== repositories.length) {
localStorage.setItem('repositories', JSON.stringify(repositories));
}
}, [repositories]);