Wątek przeniesiony 2023-09-15 11:42 z JavaScript przez Riddle.

React useEffect na często zmienianą tablicę obiektów

0

Witam,
tworzę interaktywny diagram, którego jedną z opcji jest zmiana koloru węzła. Wszystkie węzły przechowuję w tablicy w formie obiektów. Następnie w komponencie węzła pobieram tę tablicę i odszukuję węzła o konkretnym id. Chciałbym w jakiś sposób przechować dane węzła, żeby nie korzystać ciągle z find na tablicy. Jednak kiedy użyję w taki sposób useEffect:

useEffect(() => {
		if (!nodes) return;
		setCurrentNodeData(nodes?.find((el) => el.id === id));
	}, [nodes]); 

Wykonuje on się wielokrotnie podczas przeciągania węzła. Jest to spowodowane tym, że podczas przeciągania zmieniana jest jedna z wartości obiektu, która w tym komponencie nie jest istotna. Czy da się tego uniknąć i reagować tylko na zmiany konkretnej właściwości konkretnego obiektu?

Korzystam z React-Flow

0
Gouda105 napisał(a):

Czy da się tego uniknąć i reagować tylko na zmiany konkretnej właściwości konkretnego obiektu?

Tak

Jeśli mamy obiekt to możemy porównać pojedynczą właściwość

const [value, setValue] = useState({
  name: "Xarviel",
  age: 24,
});

useEffect(() => {
  // ...
}, [value?.name])

Przy tablicach możemy porównać jej długość, sprawdzać konkretną pozycję po indexie, lub skorzystać z jakieś metody find, some itd

const [nodes, setNodes] = useState([]);

useEffect(() => {
  // ...
}, [nodes?.length])

useEffect(() => {
  // ...
}, [nodes?.[3]?.name);

useEffect(() => {
  // 
}, [nodes?.find((el) => el.id === id)?.name]);

1 użytkowników online, w tym zalogowanych: 0, gości: 1