Forem: Jatin Panjwani

Frontend Code Review Checklist

Jatin Panjwani — Sat, 06 Feb 2021 10:29:15 +0000

General

Look for blocks of code with more than a few lines of code that look similar. Is it possible to refactor to reduce duplication? (DRY)
Remove unused/unreachable code.
Remove commented out code.
Remove console.logs (unless you have strong motivation why you need it).
Constant values should be replaced with const variables with meaningful names

JavaScript

Use const over let (avoid var).
Handle JS exceptions (JSON parsing,...) and errors
Handle promise rejections and api errors properly
Does a function take too many parameters? If there are more than 4 (or some number set by our team), use an object to avoid the hassle of parameter ordering and null values.
Are values and data cached? Any string, object, etc., should be cached if it is used more than once. (example, memo() in React) Refer this for detail
Are variable and function names so short that they are not meaningful at a glance? Longer names (be reasonable, of course) are more likely to be meaningful and self-documenting. Furthermore, searching globally for a longer name will return fewer results, which makes code-digging easier.
Avoid using nested if/else statements

React

Please try keeping components small (single responsibility)
While adding any function, object as dependency to useEffect hook, check if it is stable (to avoid infinite render loops)
Avoid state updates in loop
If new library is used for a feature, check for library size (if lightweight library present then check it out)
If any event listeners are registered in mounting phase, please unregister those in cleanup effects
If there are any timers (setTimeout, setInterval) register in mounting phase, please unregister those in cleanup effects
Does component handle empty, default, error and max out states ?
If there are any React warnings reported in console, please solve that for example, Provide a key prop with a unique value for each element in array.

Compatibility

Check how component/page works under different network conditions
- Slow and Fast 3G
- No Network (Offline)
Check how component/page looks in different browsers (Desktop and mobile)
- Chrome (must) and incognito (if applicable in your case) Firefox, Safari
If using experimental browser feature, check if it supports chrome, firefox, safari for example, Intersection Observer

References

https://github.com/mgreiler/all-about-code-review
https://gist.github.com/bigsergey/aef64f68c22b3107ccbc439025ebba12
https://tech.ebayinc.com/engineering/effective-front-end-code-review/

Thanks guys for reading, let me know in comment section what process/points you guys follow for great Frontend Code reviews. If you like this content please like, share and comment.

Loop an array using closures in JavaScript

Jatin Panjwani — Sat, 06 Feb 2021 08:10:07 +0000

What if someone asks you to visit each element in an array without using any looping mechanism in JavaScript, what would you do?
.
.
.
.
.
.
Here comes closure to the rescue. While reading about this concept, I came across this problem and found it interesting.

Solution:

function getArrayItems(array){
 let i = 0;
 return function(){
   return array[i++];
 }
}


//print an array using concept of closure
const next = getArrayItems([1,2,3,4,5,6,7]);

function loop (cb) {
  const value = cb();
   if (value === undefined) {
     return;
   } 
   console.log(value);
   return loop(cb);
}

loop(next);

Run code here : https://repl.it/@jatin33/ClosureExample#index.js
Please comment what are some other applications you guys can think of.

Object Equality in JavaScript

Jatin Panjwani — Sat, 25 Jul 2020 11:01:25 +0000

Object comparison in javascript works a bit differently than primitive value comparison.

Objects are compared by reference while primitives are compared by value.

For example,

const obj1 = { name: 'John', age: 25 };
const obj2 = { name: 'John', age: 25 };

console.log(obj1 === obj2); // false

// primitive value comparison
const a = 10;
const b = 10;

const name = 'Jack';
const surname = 'Jack';

console.log(a === b); // true
console.log(name === surname); // true

Since the above objects are compared by reference which means both are stored at different memory locations.

So there are two different ways to compare objects:

Shallow Equality
Deep Equality

Shallow Equality

JSON.stringify()

This is the first method that comes to my mind when looking to compare two objects, though this approach has several limitations. It is useful in cases where the order of the keys of two given objects are the same.

For example,

const person1 = { 
                  name: 'jack dorsey',
                  founded: 'twitter', 
                  addresses: ['new york', 'boston'] 
                };
const person2 = { 
                  name: 'jack dorsey',
                  founded: 'twitter', 
                  addresses: ['new york', 'boston'] 
                };

console.log(JSON.stringify(person1) === JSON.stringify(person2)); // true

// order of key changes
const person3 = { 
                  founded: 'twitter', 
                  addresses: ['new york', 'boston'],
                  name: 'jack dorsey'
                };

console.log(JSON.stringify(person3) === JSON.stringify(person2)); // false

Custom isEqual check

function isEqual(obj1, obj2) {
  if (Object.keys(obj1).length !== Object.keys(obj2).length) return false;

  for (let [key, value] of Object.entries(obj1)) {
    if (!obj2[key] || obj2[key] !== value) {
      return false;
    }
  }

  return true;
}

console.log(isEqual({
                     name:'hela',
                     age: 5000
                    }, 
                    {
                     name:'hela', 
                     age: 5000
                    })); // true

console.log(isEqual({
                     name:'hela',
                     age: 5000, 
                     power: 90000
                     }, 
                     {
                      name:'hela', 
                      age: 5000
                     })); // false

console.log(isEqual({
                     name:'hela',
                     age: 5000
                    }, 
                    {
                     name:'hela', 
                     age: 4000
                    })); // false

But the above method has a major limitation which is if some key has an object or array as its value then this method breaks.

For example,

console.log(isEqual({
              name: 'Shazam',
              age: 15,
              superpowers: ['flying', 'thundershock']
            },
            {
             name: 'Shazam',
             age: 15,
             superpowers: ['flying', 'thundershock']
            })); // false

Deep Equality

This approach helps solve the limitation faced by above method.

const person1 = {
    name: 'Jatin',
    age: 25,
    address: {
        city: 'Mundra',
        state: 'Gujarat',
        nation: 'India'
    }
}

const person2 = {
    name: 'Jatin',
    age: 25,
    address: {
        city: 'Mundra',
        nation: 'India',
        state: 'Gujarat'
    }
}

const person3 = {
    name: 'Jatin',
    age: 25,
    address: {
        city: 'Baroda',
        nation: 'India',
        state: 'Gujarat'
    }
}

function isDeepEqual(obj1, obj2) {
    if (Object.keys(obj1).length !== Object.keys(obj2).length) return false;

    for (let [key, value] of Object.entries(obj1)) {
        if (!obj2[key]) {
            return false;
        } else {
            if (typeof obj2[key] === 'object' && typeof value === 'object') {
                return isDeepEqual(obj2[key], value);
            } else if (typeof obj2[key] !== 'object' && typeof value !== 'object') {
                if (obj2[key] !== value) {
                    return false;
                }
            } else {
                return false;
            }
        }
    }

    return true;
}

isDeepEqual(person1, person2); // true
isDeepEqual(person2, person3); // false

Parting Notes

This problem is covered well by libraries like Lodash, Underscore. This problem is a favorite interview question for entry level javascript engineers. Thanks for taking the time to read this. I'd love some feedback. All the best for your upcoming interview.

Different flavors of setState method in React

Jatin Panjwani — Sun, 21 Jun 2020 09:18:07 +0000

Recently I was working on developing a react component where on updating state I had to make a fetch call which used one of the state properties as a URL parameter and I ran into some trouble which led me to read about setState() method in depth.

this.setState({ userType: 'vendor'});

fetch(`${BASE_URL}/${this.state.userType}`)
.then((data) => { console.log(data) 
});

So according to fetch call made using the above code, I should have made call to URL with type vendor in it but it turns out that value of userType property wasn't updated despite the setState call made previous to the fetch call.

So I visited React official documentation and there I found that setState method is asynchronous in nature. This revelation led me to read about setState method in detail and I found below 3 ways of using this method.

1. Normal mode

this.setState({ userType: 'vendor' });

In this mode object passed to setState method is shallow merged in current state object.

2. Functional mode

this.setState((state, props) => {
  return {
    xCoordinate: state.xCoordinate + 1
  }
});

In this mode, we pass a function to setState method that receives the state and props which refer to the component's state and props at the time the change is being applied and this function computes the new state object which gets shallow merged to current state object.

Use cases

If we want to update state based on some previous state values, this mode might help us.
Classic example would be toggling functionality.

this.setState((state) => {
  return {
     isOpen: !state.isOpen
  }
});

Useful in creating Animations, Games, Dynamic Visualizations etc

3. Updater mode

this.setState({ userType: 'vendor'}, () => {
  fetch(`${BASE_URL}/${this.state.userType}`)
    .then((data) => { 
     console.log(data) 
    });
});

According to React documentation,

The second parameter to setState() is an optional callback function that will be executed once setState is completed and the component is re-rendered. Generally we recommend using componentDidUpdate() for such logic instead.

This mode helped me to solve the problem that I was facing at the beginning of the article.

Use cases

If we want to access state values as soon as they are updated.

Parting Notes

Though setState method solves the problem it was designed to solve, we can improve it syntactically by providing promisified version of it as it is already asynchronous in nature.

Something like this:

this.setState({ x: 'abc' }).then((currentState) => {
 // currentState holds the new state after we make updates to it 
});

Thanks for taking the time to read this. I'd love some feedback. Please share your experiences with using setState in comments and like and share this post if you liked reading it.