DEV Community

Cover image for Stop this, use this instead : Top 5 best practices JS / React
Nicolas B.
Nicolas B.

Posted on • Originally published at brdnicolas.com

Stop this, use this instead : Top 5 best practices JS / React

#webdev #javascript #react #learning

1 - Optimizing Parameter Checks

❌ Stop this: 

if (userRole !== 'admin' && userRole !== 'moderator' && userRole !== 'user') {
   console.error("Invalid user role")
}
Enter fullscreen mode Exit fullscreen mode

✅ Use instead: 

const allowedRoles = ['admin', 'moderator', 'user'];

if (!allowedRoles.includes(userRole)) {
        console.error('Invalid user role');
}
Enter fullscreen mode Exit fullscreen mode

2 - useReducer for toggle states

❌ Stop this: 

const [isModalVisible, setIsModalVisible] = useState(false)

setIsModalVisible((prevState) => !prevState)
Enter fullscreen mode Exit fullscreen mode

✅ Use instead: 

const [isModalVisible, toggleModalVisibility] = useReducer((currentValue) => !currentValue, false)

toggleModalVisibility()
Enter fullscreen mode Exit fullscreen mode

3 - Destructured Objects as Parameters

❌ Stop this: 

const processUserData = (firstName, lastName, age, email) => {
    ....
}

processUserData("Toto", "Tata", 35, "tototata@gmail.com");
Enter fullscreen mode Exit fullscreen mode

✅ Use instead: 

const processUserData = ({ firstName, lastName, age, email }) => {
    ....
}

processUserData({
    firstName: "Toto",
    lastName: "Tata",
    age: 35,
    email: "tototata@gmail.com"
});
Enter fullscreen mode Exit fullscreen mode

4 - Efficient Object Cloning

❌ Stop this: 

const originalObject = {
    key1: 'value1',
    key2: {
        key2a: () => console.log('value2a')
    }
}

const objectCopy = originalObject
Enter fullscreen mode Exit fullscreen mode

✅ Use instead: 

const originalObject = {
    key1: 'value1',
    key2: {
        key2a: () => console.log('value2a')
    }
}

const objectCopy = structuredClone(originalObject)
// or
const objectCopy = {...originalObject}
Enter fullscreen mode Exit fullscreen mode

5 - Use Set to efficiently manage unique values

❌ Stop this: 

const uniqueItemsArray = ['Apple', 'Banana', 'Orange', 'Banana', 'Apple'];

// Adding new items to the Array
uniqueItemsArray.push('Grapes');
uniqueItemsArray.push('Orange'); // Already exists but added again

// Checking if a value exists in the Array
const hasGrapes = uniqueItemsArray.includes('Grapes');

// Deleting an item from the Array
uniqueItemsArray = uniqueItemsArray.filter(item => item !== 'Banana');

uniqueItemsArray.forEach(item => {
  console.log(item);
});
Enter fullscreen mode Exit fullscreen mode

✅ Use instead: 

const uniqueItemsSet = new Set(['Apple', 'Banana', 'Orange', 'Banana', 'Apple']);
// will show ['Apple', 'Banana', 'Orange']

// Adding new unique items to the Set
uniqueItemsSet.add('Grapes');
uniqueItemsSet.add('Orange');

// Checking if a value exists in the Set
const hasGrapes = uniqueItemsSet.has('Grapes');

// Deleting an item from the Set
uniqueItemsSet.delete('Banana');

// Iterating through the Set
for (let item of uniqueItemsSet) {
  console.log(item);
}
Enter fullscreen mode Exit fullscreen mode

My Linkedin
My X
My portfolio

Top comments (16)