by Sai gowtham

Intro to Thunks in JavaScript

In this tutorial, we will learn about what are thunks and how to use the thunks in our JavaScript code.

Definition of thunk

A thunk is just a function which delays the evaluation of the value.

The thunk function doesn’t take any arguments and gives the value whenever you invoke the thunk.

Example of synchronous thunk


function subtract(x,y){
    return x-y;
}

// subtract function is evaluated the
// expression and result is returned immediately
console.log(subtract(5,3)) // 2


// this is a thunk function

// result is delayed untill we call the thunk() function
const thunk = function (){
    return subtract(5,3);
}

// we always get the same data whenever we call the thunk function
console.log(thunk()) // 2

In the above code, we first defined the subtract function and next we defined thunk function which returns the value of subtract function.

Asyncrouchronous thunks

Sometimes we need to make network requests in such case we need to use asynchronous thunks.

If you know about redux state management library which uses the asynchronous thunks to delay the actions to dispatch.

Let’s see an example:

function fetchData(fn){
   setTimeout(()=>fn(1),2000)
}


const asyncThunk = function (){
   return fetchData(function(data){
      console.log(data)
  })
}

asyncThunk()

// 1

In the above code, we used setTimeout function to make our code asynchronous.

Network requests example using thunks

function fetchData(fn){
  fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => fn(json))
}


const asyncThunk = function (){
   return fetchData(function getData(data){
      console.log(data)
  })
}

asyncThunk()

In the above code we are not calling the getData function immediately we only call the getData function whenever the data is available from the API endpoint.

async thunk example

In our case, we just logged the data in the console if you want to render the data in the dom you can do it.

Rendering data example

thunks rendering dom

In the above example we used FetchData button to invoke the asyncThunk() function then we render the data in the dom.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY