React - Rerenders in useEffect lags UI - javascript

I'm trying to think of a better way to do my onChange validation for my form but it's really laggy because of the multiple rerenders.
This is my useEffect code:
useEffect(() => {
if (passwordValues.password) {
setValidPassword({ confirmPassword: validateConfirmPassword(correctPassword), password: validatePassword(correctPassword) })
}
if(formData.name){
setValidFormData(validFormData => ({...validFormData, name: validateData(correctFormData, "name")}))
}
if(formData.lastName){
setValidFormData(validFormData => ({...validFormData, lastName: validateData(correctFormData, "lastName")}))
}
if(formData.email){
setValidFormData(validFormData => ({...validFormData, email: validateData(correctFormData, "email")}))
}
if(formData.phone){
setValidFormData(validFormData => ({...validFormData, phone: validateData(correctFormData, "phone")}))
}
}, [passwordValues, correctPassword, correctFormData, formData])
I know I can maybe do that in just a couple lines but is that what is doing so many rerenders?
My formData, passwordValues, correctPassword and correctFormData change on every input change.
-- EDIT --
I removed most of the dependencies in the array and I just stayed with [formData], improves the speed, but still quite a bit laggy.

I am writing it here, because it will be a bit long explanation, not suitable for comments.
These scenarios are pretty common in any application , where you have to react to changes in values and to tackle this I just created one special hook, use-effect-x (Writing tests is pending)
This custom hook will tell you the changed item set, which can be very useful here. Below is the code , that I was able to write based on your inputs. you can make use of useEffectX as a replacement of useEffect everywhere. This way non-needed setValidFormData will not run. Give it a try and let me know.
import { useEffectX } from "use-effect-x";
useEffectX(
({
changedItem: [
changeObjConfirmPassword,
changeObjPassword,
changeObjName,
changeObjLastname,
changeObjEmail,
changeObjPhone,
],
}) => {
if (changeObjConfirmPassword.changed) {
setValidPassword({
confirmPassword: validateConfirmPassword(confirmPassword),
});
}
if (changeObjPassword.changed) {
setValidPassword({
password: validatePassword(correctPassword),
});
}
if (changeObjName.changed) {
setValidFormData((validFormData) => ({
...validFormData,
name: validateData(correctFormData, "name"),
}));
}
if (changeObjLastname.changed) {
setValidFormData((validFormData) => ({
...validFormData,
lastName: validateData(correctFormData, "lastName"),
}));
}
if (changeObjEmail.changedd) {
setValidFormData((validFormData) => ({
...validFormData,
email: validateData(correctFormData, "email"),
}));
}
if (changeObjPhone.changed) {
setValidFormData((validFormData) => ({
...validFormData,
phone: validateData(correctFormData, "phone"),
}));
}
},
[confirmPassword, password, name, lastName, email, phone]
);
Thanks and let me know, if this is not the suggestion you were expecting, I will move it.

Related

How can I update an already stored boolean value in prisma with mongoDB?

I am using prisma with mongoDb for the first time and I want to update a boolean value stored in a collection, but I am not able to find a way/query to update the value from true to false or vise versa...:(
const updateUser = await prisma.user.update({
where: {
userToken: token,
},
data: {
isOnline: true,
},
})
I have this 'isOnline' stored as false default and this is what I have tried wrt prisma official documentation, but this did not worked for me
I think you are looking for set
const updateUser = await prisma.user.update({
where: {
userToken: token,
},
data: {
isOnline: {
set: true
},
},
})
Since true and false values could be mistaken as a special instruction in "prisma logics", the response from #Fastnligth should be the correct one -did't tried that though-.
Since Prisma ORM implemented MongoDB as an after thought, some of these functionalities might "seem a bit off".
I've arrived here trying to update an embedded field without updating the whole document, just the given field.
Leaving my two cents in case somebody else is having the same sailing over google ⛵️
You can do that as follows
const order = await prisma.order.update({
where: {
id: 'some-object-id',
},
data: {
shippingAddress: {
// Update just the zip field
update: {
zip: '41232',
},
},
},
})
official docs: https://www.prisma.io/docs/concepts/components/prisma-client/composite-types

React, losing saved data in localStorage with useEffect after page refresh

This is probably a noob question, but I'm facing some troubles with the useEffect() hook. I have a Taking Notes App, and I want to make the data persist. I'm using 2 useEffects: one for when the page is refreshed/loaded by the first time, and other one for when I add a new note to my app.
I putted some logs to check what's happening:
const [notes, setNotes] = useState([
{
noteId: nanoid(),
text: 'This is my 1st note!',
date: '30/07/2022'
},
{
noteId: nanoid(),
text: 'This is my 2nd note!',
date: '30/07/2022'
}
])
// 1st time the app runs
useEffect(() => {
const savedNotes = JSON.parse(localStorage.getItem('react-notes'))
console.log('refresh page call:',savedNotes)
if(savedNotes) {
setNotes(savedNotes)
}
}, [])
//every time a new note is added
useEffect(() => {
localStorage.setItem('react-notes', JSON.stringify(notes));
console.log('new note call:', notes)
}, [notes])
The behaviour is a bit strange, because when the page is refreshed the new data is appearing inside the log, but then it disappears, maintaining only the hardcoded data:
It also makes more calls than I was expecting to. Any thoughts about what is going on here?
Issue
The problem is caused by the below useEffect and how you are initially setting the state:
useEffect(() => {
localStorage.setItem('react-notes', JSON.stringify(notes));
console.log('new note call:', notes)
}, [notes])
The above useEffect runs every time notes changes, but also on mount. And on mount the state is equal to that initial array given to useState. So the localStorage is set to that array.
Solution
A solution is to change how you are setting the state as below, so you pick what's in the localStroge if there is something, and otherwise use that initial array you have:
const [notes, setNotes] = useState(
!localStorage.getItem("react-notes")
? [
{
noteId: nanoid(),
text: "This is my 1st note!",
date: "30/07/2022",
},
{
noteId: nanoid(),
text: "This is my 2nd note!",
date: "30/07/2022",
},
]
: JSON.parse(localStorage.getItem("react-notes"))
);

React table not repopulating after page refresh

On my React page I have a DataTable component, the source of which is a data array in my state. In my useEffect I call an action to get the data, map through it and define an object for each row, push it to a new array and do setData to that new array.
It works fine on initial load, but if I click refresh the table is blank and the code doesn't run again
const [data, setData] = useState([])
useEffect(() => {
dispatch(listContractors())
const newData = new Array;
contractors.map(c => {
let obj = {
action: `DELETE | EDIT`,
psa_licence_no: c.psa_licence_no,
company: c.company,
trading_as: c.trading_as,
address_1: c.address_1,
address_2: c.address_2,
address_3: c.address_3,
county: c.county,
eircode: c.eircode,
contact_f_name: c.contact_f_name,
contact_s_name: c.contact_s_name,
office_tel_no: c.office_tel_no,
mobile_tel_no: c.mobile_tel_no,
sentinel_id: c.sentinel_id,
email: c.email,
intruder: c.intruder,
cctv: c.cctv,
guard_static: c.guard_static,
arc_intruder: c.arc_intruder,
arc_cctv: c.arc_cctv,
issue_date: c.issue_date,
expiry_date: c.expiry_date,
psa_date_added: c.psa_date_added,
psa_date_updated: c.psa_date_updated,
psa_date_removed: c.psa_date_removed
}
newData.push(obj)
})
setData(newData)
}, [dispatch])
EDIT:
If I refresh the page from the app, so navigate to a different page and navigate back to this one, it works. The problem only occurs if I click the refresh button on chrome
You are missing contractors in dependency array in useEffect
useEffect(() => {
dispatch(listContractors())
const newData = new Array;
contractors.map(c => {
let obj = {
action: `DELETE | EDIT`,
psa_licence_no: c.psa_licence_no,
company: c.company,
trading_as: c.trading_as,
address_1: c.address_1,
address_2: c.address_2,
address_3: c.address_3,
county: c.county,
eircode: c.eircode,
contact_f_name: c.contact_f_name,
contact_s_name: c.contact_s_name,
office_tel_no: c.office_tel_no,
mobile_tel_no: c.mobile_tel_no,
sentinel_id: c.sentinel_id,
email: c.email,
intruder: c.intruder,
cctv: c.cctv,
guard_static: c.guard_static,
arc_intruder: c.arc_intruder,
arc_cctv: c.arc_cctv,
issue_date: c.issue_date,
expiry_date: c.expiry_date,
psa_date_added: c.psa_date_added,
psa_date_updated: c.psa_date_updated,
psa_date_removed: c.psa_date_removed
}
newData.push(obj)
})
setData(newData)
}, [dispatch, contractors])
I recommend using eslint to catch this type of bugs.

TypeORM findOne with nested relations

I am having some issues performing a nested find query with TypeORM. Here's the basic code:
const { completionId } = req?.params;
const user = req.user;
const retrievedCompletion = await getRepository(
CompletionGoogleSearch
).findOne({
relations: ['run', 'run.user'],
where: {
id: completionId,
// run: { user: { id: user.id } }, // This is the code that breaks the function
},
});
console.log(retrievedCompletion?.run.user.id);
console.log(user.id);
It looks to me like there's nothing out of order, and that the query should run. Any idea on what I am doing wrong? I know I can get around this issue by writing a querybuilder query or using raw SQL–I am just curious to understand if there's a flaw in my code.
typeorm added the ability to use nested object
userRepository.find({
relations: {
profile: true,
photos: true,
videos: {
videoAttributes: true,
},
},
});
on this way, you can fetch the data without using eager.
You can find more information here
The feature you're asking about doesn't supported on typeorm yet (Feb 2021).
Checkout this issue that was opened on 2018.
the Solution is use eager:true in run.user entity :
#OneToOne(() => User, User=> User.run, {
eager:true
})
user: User;
and next time you search in CompletionGoogleSearch do just relations: ['run'] and user will come with it.

beforeUpdate doesn't seem to be called

I have a simple user model as follows :
'use strict';
let hashPassword = (user, options) => {
if (!user.changed('password')) { return; }
return require('bcrypt')
.hash(user.getDataValue('password'), 10)
.then(hash => user.setDataValue('password', hash));
};
module.exports = (sequelize, DataTypes) => {
const User = sequelize.define('User', {
username: {allowNull: false, type: DataTypes.STRING, unique: true},
email: {allowNull: false, type: DataTypes.STRING, unique: true},
password: {allowNull: false, type: DataTypes.STRING, unique: false},
}, {
hooks: {
beforeCreate: hashPassword,
beforeUpdate: hashPassword
}
});
return User;
};
It works very well on user creation, but the beforeUpdate hook doesn't seem to work or be called, and the password is saved in plain text in the database.
Where does it come from and how can it be fixed ?
How are you updating the user? There is a difference between getting an instance of the user and updating it and updating by querying the model. The former is an instance update and the latter a bulk update operation (even if your where filter would return a single item).
This distinction is important because beforeUpdate is an instance hook so it would be triggered on instance updates only. You can either change the way you update the user or implement a beforeBulkUpdate hook as well.
To offer an alternative to Unglückspilz answer. You can also add the option
{ individualHooks: true }
Note: methods like bulkCreate do not emit individual hooks by default - only the bulk hooks. However, if you want individual hooks to be emitted as well, you can pass the { individualHooks: true } option to the query call. However, this can drastically impact performance, depending on the number of records involved (since, among other things, all instances will be loaded into memory).
https://sequelize.org/master/manual/hooks.html#model-hooks

Categories