ReactJS force useState to set immediately appropriate value - reactjs

Question

I have a React app with selecting logic but everything in this logic breaks because of "useState()". I know that "useState()" is asynchronous and value is not assigned immediately but to work my logic value is needed immediately when I click on the row. And the question is how to set value immediately in the "setEntry()" ?
This is my code:
const TableRow = (props) => {
const [entry, setEntry] = useState('');
const array = Object.entries(props);
const navigate = useNavigate();
let previousRow;
const deleteContact = async (e) => {
e.preventDefault();
const id = e.target.getAttribute('id');
await requester(urls.accountWithId + '/' + id, methods.delete);
await requester(urls.contacts + '/' + id, methods.delete)
.then(() => {
navigate(urls.mainPage);
notificationsReceiver('Contact is deleted successfully!');
})
.catch((e) => {
alert(e.message);
});
};
const checkIsSelected = (id) => {
if (entry === id) {
setEntry('');
return;
}
setEntry(id);
};
const changeStyle = (e) => {
const currentRowId = e.currentTarget.getAttribute('id');
if (entry === '') {
e.currentTarget.style.backgroundColor = '#E3E5E7';
setEntry(currentRowId);
previousRow = e.currentTarget;
}
else if (entry === currentRowId) {
e.currentTarget.style.backgroundColor = '#F5F7FA';
setEntry('');
}
else if (entry !== currentRowId) {
setEntry(currentRowId);
e.currentTarget.style.backgroundColor = '#E3E5E7';
previousRow.style.display = '#F5F7FA';
previousRow = e.currentTarget;
}
};
const navigateToDetails = (e) => {
e.preventDefault();
const id = e.target.getAttribute('id');
navigate(urls.details + '/:' + id);
};
const editContact = async (e) => {
e.preventDefault();
const id = e.target.getAttribute('id');
navigate(urls.editContact + '/:' + id);
}
return (
<tr className={styles['contact-row']} id={array[1][1].id} onDoubleClick={navigateToDetails} key={array[1][1].id} onClick={(e) => { checkIsSelected(array[1][1].id); changeStyle(e); }}>
<td id={array[1][1].id}>{array[1][1].name}</td>
<td id={array[1][1].id}>{array[1][1].continentAndCountry}</td>
<td id={array[1][1].id}>{array[1][1].email}</td>
<td id={array[1][1].id}><a href={array[1][1].baseUrlForFreeGuyz + '/' + array[1][1].accountNameForFreeGuyz}>{array[1][1].accountNameForFreeGuyz}</a></td>
<td id={array[1][1].id}><a href={array[1][1].baseUrlForInstagram + '/' + array[1][1].accountNameForInstagram}>{array[1][1].accountNameForInstagram}</a></td>
<td id={array[1][1].id}><a href={array[1][1].baseUrlForTwitter + '/' + array[1][1].accountNameForTwitter}>{array[1][1].accountNameForTwitter}</a></td>
<td id={array[1][1].id}>{array[1][1].accountType}</td>
<td>
{entry && <>
<button className={`btn btn-warning ${styles['edit-button']}`} id={array[1][1].id} onClick={editContact}>Edit</button>
<button className={`btn btn-danger ${styles['delete-button']}`} id={array[1][1].id} type="submit" onClick={deleteContact}>Delete</button></>}
</td>
</tr>
);
}
export default TableRow;
I'll be grateful if anyone can help me.

Answer 1

Instead of continuously calling setSentry for state updates, you can use a local variable to check value changes and after all, you can update entry at once.
const changeStyle = (e) => {
//local variable to proceed the internal logic
let updatedEntry = e.currentTarget.getAttribute('id')
if (updatedEntry === currentRowId) {
e.currentTarget.style.backgroundColor = '#F5F7FA';
updatedEntry = ""
} else {
updatedEntry = currentRowId
e.currentTarget.style.backgroundColor = '#E3E5E7';
previousRow.style.display = '#F5F7FA';
previousRow = e.currentTarget;
}
currentRowId = e.currentTarget.getAttribute('id');
//only update `entry` state once after all
setEntry(updatedEntry)
};