Почему React вызывает ре-рендеринг бесконечность раз?

Question

[venanen]

Добрый день.
Мастерю ToDo App. По клику "Добавить заметку" диспатчу соответственный экшн, тут все хорошо.
Список готовых заметок хочу хранить в массиве, и отрисовывать их через .map(), а чтобы после каждого добавления заметки и перерисовки массив заметок не сбрасывался, записываю его в state.
Но, реакт выдает ошибку:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

Я попробовал в state записать просто любое число, но ошибка не исчезла. Убираю изменение state - ошибка пропадает. Добавляю с любым значением - снова бесконечный ре-рендеринг.
Код компонента выглядит так:

import React, {useState} from 'react'
import './Notes.css'
import { connect } from 'react-redux';
const Notes = (props)=>{
	let [notes, setNotes] = useState();
	let key = 0;
	setNotes(123123)
	console.log(props.notes)

	/*for(let i = 0; i<16; i++){
		notes.push(<div key={++key} className="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>)

	}*/

	return (

		<div className="masonry">
			{ console.log(props.notes)} {
				/*props.notes.map(

				(e)=>{
				return <div key={++key} className="item">{e[0]} - {e[1]}</div>
				}
			)*/
			}
		</div>
	)
}

const mapStateToProps = (state)=>{
	return {
		notes: state
	}
}

export default connect(mapStateToProps)(Notes)

P.S. Знаю, что выполнять логику не в редьюсерах, ни в компонентах не стоит, буду чуть позже использовать redux-thunk, пока так

Answer 1

[0xD34F]

Потому что вы постоянно обновляете стейт.

Наверное, вы хотели задать начальное значение - указывайте его в качестве параметра при вызове useState.

Comments

[venanen]

let [notes, setNotes] = useState(0);
	let key = 0;
	setNotes(123123)

Ошибка не ушла

[0xD34F]

venanen, говорю же - постоянно обновляете стейте. Уберите этот setNotes(123123). Вы что, не понимаете, что обновление состояния вызывает рендеринг компонента?

[venanen]

0xD34F, почему постоянно? Изначально там была запись новых данных из props. Я думал дело в них, и заменил на простое число, но ре-рендер остался.
Фактически, как бы я не стал использовать state, всегда возникает луп, а почему - мне не понятно.

[0xD34F]

venanen, ещё раз - обновление стейта вызывает рендеринг компонента. При рендеринге компонента вы обновляете стейт. Ну и всё. Если не понимаете - наверное, вам рано браться за реакт, сперва стоит хоть какой-то опыт в программировании получить.

Обновлять стейт следует не при рендеринге, а по наступлении какого-либо события. Например, когда пользователь по кнопке кликает.

[venanen]

0xD34F, все, я понял, спасибо, затупил.
Программированием давно занимаюсь, но никак не могу привыкнуть к магии, когда все само обновляется.
Но тогда возникает вопрос, если можно, после диспатчинга передаются новые props с помощью connect()(), как отловить это событие?
Иначе говоря, как сделать добавление новых props к уже существующим?

[0xD34F]

venanen, useEffect.