JavaScript Array checks

Sibusiso Massango — Fri, 23 Feb 2024 09:44:34 +0000

In JavaScript there are many ways to check the validity of an array, but so far, I haven't found a way which I will be proud of when checking if array has values. Below are ways we use to check whether array has values?

Example:

//Assume you don't know whether the array has values or not, but you want to perform some actions once it does.

let arr = [];

// this should at least tell us whether the array has values or not, but it still assumes that the variable is an array. 

if(arr.length > 0){
}
// What if is not, then below is a full proof example to prevent this.
if(arr && arr.length > 0){
}
// This will check for null and undefined, and then check if it's an array.

The question is there a better way to write the above condition in advance JS?

How useMemo and useCallback hooks work?

Sibusiso Massango — Wed, 21 Jun 2023 08:57:04 +0000

The useMemo and useCallback hooks are almost the same but designed and developed for different reasons. The implementation is the same they both expect a function and array of dependencies.

Implementation example
useMemo(()=>{},[])
useCallback(()=>{},[])
The above code do look similar but serves different purposes.

Difference between useMemo and useCallback

useMemo calls it's function and return the memoized results while useCallback return it's memoized function when dependencies changes.
useMemo only compute when there was a change in dependencies and return memoized results.

What is Memoization?
Memoization in javascript is an optimisation technique, to reduce the complexity of the application, runtime of the application, and proper utilisation of resources (Time and Memory).

By understanding how to use this two hooks properly it will help improving your applications performance.

How does useMemo() work in react?

const memoizedValue = useMemo(function,dependencies)

On an initial rendering useMemo invokes the function, memoize the calculated result and then returns it to the component.
If the there's no change on dependencies during the next rendering, then useMemo will not invoke the function, but it will returns the memoize value.

How does useCallback() work in react?

const memoizedFunction = useMemo(function,dependencies)

React useCallback Hook returns a memoized callback function. Think of memoization as caching a value so that it does not need to be recalculated. This allows us to isolate resource intensive functions so that they will not automatically run on every render, but only run when the was a change in dependencies.

In Conclusion

Understanding how this hooks should help developers to implement them in a correct way, to ensure applications are as optimised as possible. This will also help to avoid creating or running functions every render.

Forem: Sibusiso Massango

JavaScript Array checks

How useMemo and useCallback hooks work?