DEV Community: Arun

Guide to setTimeout and setInterval in Javascript

Arun — Sat, 10 Jul 2021 13:32:54 +0000

The global object in Javascript provides two in-built methods setTimeout and setInterval to trigger a block of code at a scheduled time.

setInterval

setInterval method accepts two arguments. A callback function and delay in milliseconds. The function passed is called at specified intervals. setInterval will continue calling the passed function until we use another in-built method clearInterval or until the window is closed.

In this example, the increment function passed as callback, will be called after every one second.

let i = 0;
function increment() {
  i++;
  console.log(i);
}
setInterval(increment, 1000);

setTimeout

setTimeout also accepts two arguements like setInterval. The function passed is called once after the specified interval.

After an interval of one second, the increment function passed to setTimeout will be called.

let i = 0;
function increment() {
  i++;
  console.log(i);
}
setTimeout(increment, 1000);

clearInterval and clearTimeout

The setInterval and setTimeout functions returns a number which is used to identify that particular function. Calling clearInterval and clearTimeout by passing the corresponding id will stop executing it.

In the example shown below, clearInterval will be executed after 3 seconds, thus terminating the setInterval call.

let i = 0;
function increment() {
  i++;
  console.log(i);
}
const incrementTimer = setInterval(increment, 1000);
setInterval(() => {
  clearInterval(incrementTimer);
}, 3000)

Exploring useRef hook

Arun — Sat, 10 Jul 2021 13:20:59 +0000

The ref in useRef stands for reference. We can use useRef to reference a javascript value or a DOM node.

useRef hook accepts one argument as the initial value and returns a mutable object (reference) which will persist for the full lifetime of the component. The returned object has a current property which holds the value we passed and can be mutated.

Updating the current property does not trigger a re-render. This is difference between useRef and useState.

Use case 1 : Mutable values

We can use useRef to create a reference to a variable that we can update without triggering a re-render.

Consider the example of a timer. setInterval returns an id which we must passed to clearInterval to stop the setInterval function from calling the callback passed to setInterval. If we stored the id returned by setInterval in a state variable, it would trigger a re-render. After re-render, a new id will again be returned by setInterval, eventually resulting in an infinite loop.

useRef can be used here instead, to avoid the re-render.

const Timer = () => {
    const [time,setTime] = useState(0);
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {      
            setTime((time)=>time + 1);          
    }, 1000);
    intervalRef.current = id;
    return () => clearInterval(intervalRef.current);
  });

  const handleCancel = () => clearInterval(intervalRef.current);

  return (
    <div>
      <h1>{time}</h1>
            <button onClick={handleCancel}>Cancel</button>
    </div>
  );
}

Use case 2: Accessing DOM elements

This is the more common use case. We can access the DOM elements and interact with the APIs of the HTML elements.

Consider the example, where we want to focus on the input field when the component mounts. We can achieve this with the help of useRef. We will have to create a reference to the the input element and on mounting calling the focus API of the element.

function App() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <input 
      ref={inputRef} 
      type="text"
            placeholder="Enter value..." 
    />
  );
}

Understanding array reduce in Javascript

Arun — Sat, 10 Jul 2021 13:20:11 +0000

As a developer, transforming data from one form to another is a pretty common use case. In Javascript, we can make use of the reduce function that is part of every array to transform the data as per our needs.

The reduce method will need at least two parameters.

A reducer function that is executed on each element of the array.
Initial value of the accumulator.

The value that is returned by the reducer function is assigned to the accumulator. This value is remembered across each iteration in the array, finally resulting in the output.

Lets say we have an array of numbers and we want to add them all up. Here is how the reducer function will look. The first argument to the reducer function will be the accumulator. The second argument is the current item in the array we are iterating over, which we want to transform and integrate into the accumulator. Inside the reducer function, after we do our desired transformation of the data, we are going to return our new accumulator.
Since here we are adding the items of the array, we are going to add the current array item with the accumulated value so far and return it, which will then become the new accumulator value.

As the elements of the array are iterated over, the accumulator value for the current array item will be the return value of the reducer function from the previous array item. So we have to provide some value for the accumulator for the first array item. This is the second parameter we pass to the reduce function. If we do not pass any value, the first array item becomes the initial value of the accumulator by default.

Use case 1 : Reducing array to a single value

// Reducing an array to calculate the sum of the array
const items = [1,5,2,7,4,8];

const reducer = (accumulator, item) => {
    return accumulator + item;
}

const initialAccumulatorValue = 0;

const result= items.reduce(reducer,initialAccumulatorValue);

console.log(result) // 27

Use case 2 : Reducing array to an object

// Reducing an array to count the number of even and odd numbers in the array
const items = [1,6,4,3,9,16,31]

const reducer = (accumulator, item) => {
    if(item % 2 === 0) return {...accumulator, evenNumbers: accumulator.evenNumbers+1};
    return {...accumulator, oddNumbers : accumulator.oddNumbers +1};
}

const initialAccumulatorValue = { evenNumbers: 0 , oddNumbers : 0 };

const result = items.reduce(reducer,initialAccumulatorValue);

console.log(result) // {evenNumbers: 3, oddNumbers: 4}

Use case 3 : Reducing array to another array of same size

This use case is very common, that there is an in-built array function map, that is provided.

// Multiplying every item in the array by 2
const items = [1,5,2,7,4,8];

const reducer = (accumulator, item) => {
    return [...accumulator, item*2];
}

const initialAccumulatorValue = [];

const result = items.reduce(reducer,initialAccumulatorValue);

console.log(result) // [2, 10, 4, 14, 8, 16]

Use case 4: Reducing array to another array based on some filters

This use case is very common, that there is an in-built array function filter, that is provided.

// Filtering array to contain only even numbers
const items = [1,5,2,7,4,8];

const reducer = (accumulator, item) => {
    if(item % 2 === 0) return [...accumulator, item];
    return accumulator;
}

const initialAccumulatorValue = [];

const result = items.reduce(reducer,initialAccumulatorValue);

console.log(result) // [2, 4, 8]

Use case 5: Reducing nested array to a flat array

const items = [[1,2,3],[4,5,6],[7,8,9]]

const reducer = (accumulator, item) => {
    return [...accumulator,...item];
}

const initialAccumulatorValue = [];

const result = items.reduce(reducer,initialAccumulatorValue);

console.log(result) // [1, 2, 3, 4, 5, 6, 7, 8, 9]