draggable columns in ReactJs Antd table causes multi renders of useEffect - javascript

I am using antd for create a table in reactJs.
I added eventListener to th tag because I want to be able to drag the columns.
I do it with useRef to get all the th tags:
const [cols, setCols] = useState(columns); // -> columns is static array of object
const tableRef = useRef(null);
useEffect(() => {
if (tableRef.current) {
let elems = tableRef.current.ownerDocument.querySelectorAll('th');
for (let i = 0; i < elems.length; i++) {
elems[i].setAttribute('draggable', true);
elems[i].addEventListener('dragstart', (e) => {
handleDragStart(e);
});
elems[i].addEventListener('dragover', (e) => {
handleDragOver(e);
});
elems[i].addEventListener('drop', (e) => {
handleOnDrop(e);
});
}
}
}, [cols]); // -> cols is the updated columns after change order
const handleDragStart = (e) => {
const { innerText } = e.target;
const idx = cols.findIndex((x) => x.title === innerText);
e.dataTransfer.setData('colIdx', parseInt(idx));
};
const handleDragOver = (e) => {
e.preventDefault();
};
const handleOnDrop = (e) => {
const { innerText } = e.target;
const droppedColIdx = cols.findIndex((x) => x.title === innerText);
const draggedColIdx = parseInt(e.dataTransfer.getData('colIdx'));
setCols(() => {
const tempCols = [...cols];
tempCols.splice(droppedColIdx, 0, tempCols.splice(draggedColIdx, 1)[0]);
return tempCols;
});
};
My problem:
The columns are draggable and I can move them.
If in the useEffect dependency I add cols array, in the first drag the useEffect will call one time, in the second drag the useEffect will call 2 times, in the third drag the useEffect will call 4 times, in the fourth drag the useEffect will call 8 times and so on.
That is every time the useEffect is call, it multiple the call in 2.
If I remove cols array from useEffect dependency, after the first drag everything is ok, but in the second drag my cols reset and initialized to columns.
Thank you for helping me.

You need to remove the listeners in the return of the useEffect in the following manner:
useEffect(() => {
const handleClick = event => {
console.log('Button clicked');
};
const element = ref.current;
element.addEventListener('click', handleClick);
// 👇️ remove the event listener when component unmounts
return () => {
element.removeEventListener('click', handleClick);
};
}, []);

Related

How to count for each mapped element?

Solved - wasn't aware of the useRef hook which helped me track each individual mapped item.
I have a set of results mapped out within a card element. I want to keep a click count for each of those elements, but with a global JS variable, it counts the clicks of all elements if I call that variable on more than one clickable element per session. I have tried to do id.index, adding (id) + index etc but am stumped. How do I properly use the unique id's to track the index for each card? Thanks
function onClick(id) {
let index = 0;
index++;
if (index >= 1) {
dosomething
} else if (index === 0) {
dosomethingelse
}
}
It's not clear what and how you want to count and onclick events.
Assuming that you need to keep track of clicks on each element/id:
You can use the useRef hook and keep it a global object to track the number of clicks per id.
const clicksPerId = useRef({});
function onClick(id) {
if (!clicksPerId.current[id]) {
clicksPerId.current[id] = 0;
}
clicksPerId.current[id]++;
// whatever you want to do with the clicks count
}
I'm kinda confused by your question to be honest however for working with arrays in javascript / React maybe you'll find some of these helpful
Getting the array length
const MyComponent = () => {
const [myArray, setMyArray] = useState([1, 2]);
// find the length of the array
const getArrayLength = () => {
return myArray.length;
}
return (
<p>hello there</p>
)
}
Doing something with the index of a maped component:
const MyComponent = () => {
const [myArray, setMyArray] = useState([1, 2]);
const handleClick = (index) => {
// do somthing with the index of the el
};
return (
<>
{ myArray.map((el, index) => {
return (
<p
key={index}
onClick={() => handleClick(index)}
>
el number { el }
</p>
)
})
}
</>
)
}

useCallback returns n+1 times where n is the number of state variables

I'm trying to set up a custom context menu, however whenever the user right clicks the context menu function returns 6 separate times, the 5th being what I need and the 6th being the default state values. However if the user double right-clicks in the same spot it returns 5 times, with the 5th return being the desired values and the menu opens. Is there a way to check before the return if all the states are changed and only return from the callback if all the needed information is present?
const ContextMenu = outerRef => {
const [xPos, setXPos] = useState("0px");
const [yPos, setYPos] = useState("0px");
const [menu, showMenu] = useState(false);
const [menuTarget, setMenuTarget] = useState('');
const [menuTargetId, setMenuTargetId] = useState('');
const handleContextMenu = useCallback(
event => {
if(event.target.className && (event.target.className.includes('bar') ||event.target.className == 'timeline' || event.target.className == 'draggablediv' || event.target.className == 'editableDiv')){
event.preventDefault();
if (outerRef && outerRef.current.contains(event.target)) {
setXPos(`${event.pageX}px`);
setYPos(`${event.pageY}px`);
setMenuTarget(event.target.className)
setMenuTargetId(event.target.id)
showMenu(true);
} else {
showMenu(false);
}
}
},[showMenu, outerRef, setXPos, setYPos]);
const handleClick = useCallback(() => {
showMenu(false);
}, [showMenu]);
useEffect(() => {
document.addEventListener("click", handleClick);
document.addEventListener("contextmenu", handleContextMenu);
return () => {
document.removeEventListener("click", handleClick);
document.removeEventListener("contextmenu", handleContextMenu);
};
}, []);
return {xPos, yPos, menu, menuTarget, menuTargetId};
};
useCallback accepts a function that returns the memoized value. Like useCallback(() => 5, []), or in your case useCallback(() => event => {...}, []).
This is because React has to call the function to get the value to memoize, so your setters are being called on every render. Which is what's causing all the weirdness.
However, even with that fix I don't think it's correct to use a function that changes references in addEventListener. You will never have up-to-date values in your contextmenu handler because it will refer to an old version of handleContextMenu. You will probably have to use a more idiomatic way of attaching a function to a UI event than the global document api.

Event listeners don't get re-attached to my HTML elements when using ES6 without re-feshing the page

I am printing a simple string to the screen. When clicking on one of its letters, is should be removed from wherever it is the string and added at the end. After I click on one letter and the new string is getting printed to the page, the letters don't preserve their event listeners. This is the JS code and here is all the code https://codesandbox.io/s/reverse-array-forked-fvclg?file=/src/index.js:0-1316:
const appBox = document.getElementById("app");
const convertString = (string) => {
let stringToArray = string.split("");
return stringToArray;
};
let stringToArray = convertString("Hello world!");
const printArrayToPage = (string) => {
string.forEach((element) => {
const textBox = document.createElement("div");
if (element !== " ") {
textBox.classList.add("letter");
} else {
textBox.classList.add("emptySpace");
}
const text = document.createTextNode(element);
textBox.appendChild(text);
appBox.appendChild(textBox);
});
};
window.onload = printArrayToPage(stringToArray);
const moveLetter = (event) => {
const targetLetter = event.target;
const letterToRemove = targetLetter.innerHTML;
targetLetter.classList.add("invisible");
if (stringToArray.includes(letterToRemove)) {
const index = stringToArray.indexOf(letterToRemove);
stringToArray.splice(index, 1);
}
stringToArray.push(letterToRemove);
appBox.innerHTML = "";
printArrayToPage(stringToArray);
};
const allLetters = document.querySelectorAll(".letter");
allLetters.forEach((element) => element.addEventListener("click", moveLetter));
const allSpaces = document.querySelectorAll(".emptySpace");
allSpaces.forEach((element) => element.addEventListener("click", moveLetter));
I tried moving the even assignments (this block)
const allLetters = document.querySelectorAll(".letter");
allLetters.forEach((element) => element.addEventListener("click", moveLetter));
const allSpaces = document.querySelectorAll(".emptySpace");
allSpaces.forEach((element) => element.addEventListener("click", moveLetter));
inside printArrayToPage function but because I am using ES6 syntax, I can't use a function before its definition. If I change to functions created used the function keyword, everything works as expected. How can I fix this issue using ES6 so that after I click on a letter and the divs get re-added to the page, event listeners are re-assigned?
If you want to move the letter node to the end, you can use the Node.parentNode property, and append the child node to the end. You don't need to create the nodes every time an item is clicked:
const moveLetter = (event) => {
const targetLetter = event.target;
const parent = targetLetter.parentNode;
parent.appendChild(targetLetter); // move the element to the end
};
See: https://codesandbox.io/s/reverse-array-forked-lf333?file=/src/index.js
Use event delegation. Here's a simple example snippet:
// adding an event listener to the document
document.addEventListener("click", evt => {
console.clear();
const origin = evt.target;
// ^ where did the event originated?
if (origin.closest("#bttn1")) {
console.log("you clicked button#bttn1");
} else if (origin.closest("#bttn2")) {
console.log("you clicked button#bttn2")
}
});
createElement("h3", "header", "Wait 2 seconds...");
// creating buttons after a while. The earlier created
// event listener will detect clicks for the new buttons
setTimeout( () => {
createElement("button", "bttn1", "click me");
createElement("button", "bttn2", "click me too");
}, 2000);
function createElement(nodetype, id, text) {
document.body.appendChild(
Object.assign(document.createElement(nodetype), {id, textContent: text})
);
}
body {
font: normal 12px/15px verdana, arial;
margin: 2rem;
}
button {
margin: 0 0.6rem 0 0;
}

Removing items from state by timer

There is a local state (hook), it has an array of four elements. There is a button on the screen to add a new element to this array. When a component is loaded, in useEffect called method that removes the first element from the state every 5 seconds. If you do not touch the button that adds a new element to the state, then everything works great. But if you start adding elements, the deletion works according to the previous state, only then the state with the new element is displayed. Tell me how to fix it so that everything works stably. I understand what needs to be sought in the direction of the life cycle, a conflict of states occurs, but I can not find a solution.
const Component = () => {
const [arr, setArr] = useState(['one', 'two', 'three', 'four']);
React.useEffect(() => {
console.log("render");
setTimeout(deleteElementFromArr, 5000)
});
const addNewElementToArr = () => {
let temp = arr.slice();
temp.push('newElement');
setArr(temp);
};
const deleteElementFromArr = () => {
if (arr.length > 0) {
console.log(arr);
let temp = arr.slice();
temp.splice(0, 1);
setArr(temp)
}
};
return (<div>
<div>
<Button onClick={addNewElementToArr}>add</Button>
</div>
<div style={{margiTop: '10px'}}>
{arr.map(a => `${a} `)}
</div>
</div>)
};
https://codepen.io/slava4ka/pen/WNNvrPV
In your useEffect hook, when the effect is finished, clear the timeout. When the state is changed, it will trigger again with the new value of the state.
React.useEffect(() => {
console.log("render");
const timer = setTimeout(deleteElementFromArr, 5000);
return () => clearTimeout(timer);
});

Why is my Scroll event being called twice here?

InfiniteScrollFactory:
const scrollingSocial = (e) => {
console.log('scrollingSocial');
// e.stopPropagation();
const reachedBottom = () => socialCol.scrollHeight - socialCol.scrollTop === socialCol.offsetHeight;
const loadMoreItems = () => {
console.log('[ Fire Once ] loadMoreItems...');
$rootScope.$emit("socialmedia.stream.load");
};
if (reachedBottom()) loadMoreItems();
};
const wireSocialScroll = (list) => {
console.log('wireSocialScroll called!');
if (notEmpty(list)) {
socialCol.addEventListener('scroll', scrollingSocial);
}
};
const attachScrollListener = (location, col, list) => {
console.log('attachScrollListener');
console.log(' location', location);
switch (location) {
// case 'tagsPanel' : tagsCol = col; wireTagsScroll(list); break;
// case 'feedPanel' : feedCol = col; wireFeedScroll(list); break;
case 'socialMedia' : socialCol = col; wireSocialScroll(list); break;
}
};
My scrollingSocial function gets called once when I scroll down the mouse once. It takes about 45 'scrolls' to finally trigger my loadMoreItems function. However then it gets called twice. And I see the scroll the 46th time even though I did not scroll a 46th time.
socialMediaDirective:
const getColHeight = (tags) => {
if (notEmpty(tags)) InfiniteScrollFactory.attachScrollListener('socialMedia', socialCol, tags);
};
Scrolling and it's event triggers can be a bit finicky.
Just using this code:
$(document).on('scroll', () => console.log('scroll'));
I get multiple scrolls each time I tick my mouse wheel, no matter how carefully I do so.
It's probably the same sort of issue with what you have. What you'll want to do is simply add a boolean that keeps track of if you've called loadMoreItems, use that boolean to keep it from calling it again.
let loadingMoreItems = false;
const scrollingSocial = (e) => {
console.log('scrollingSocial');
// e.stopPropagation();
const reachedBottom = () => socialCol.scrollHeight - socialCol.scrollTop === socialCol.offsetHeight;
const loadMoreItems = () => {
console.log('[ Fire Once ] loadMoreItems...');
$rootScope.$emit("socialmedia.stream.load");
};
if (!loadingMoreItems && reachedBottom()) {
loadingMoreItems = true;
loadMoreItems();
}
};
Then, at an appropriate time (or times), change that boolean back to false to allow it to call again (scrolling back up, more items loaded, reachedBottom() resulting in false once, etc).

Categories