Consider a React app with a single parent component. Child components are nested inside this single parent component. In React, you pass data through props. And the data is passed top-down from one component to another.Now note that in this scenario, you will not be able to skip any component. That is, if the last component has to access the data, you will be going through each and every component and all the way down to the last one. In this case, you'll have to drill down using each component's prop.The method is long and laborious and doesn?t seem to fit.There will always be a possibility of error somewhere in the process. So what we want is a solution in which we don't have to interact with all the components down the line and are easily able to target a particular component.To discuss the solution available in React, TechFastly presents this article to give a proper explanation about the useContext hook and how a custom React Hook can further ease the use of the useContext Hook.The answer to your problem is in the React Context API. Using this you can access different levels of the component tree. You can get the same functionality from useContext Hook as well.<figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/b818dbc737203ab79a831af4f657af2a.png" class="kg-image" alt loading="lazy" width="602" height="184" srcset="https://techfastly.com/content/images/size/w600/2021/09/image.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/b818dbc737203ab79a831af4f657af2a.png 602w"><figcaption>This example shows the useContext Context inside of a class component and functional component.</figcaption></figure>Whenever you are going to use the useContext Hook in React, make sure you pass in the entire Context object, and not just the consumer or provider.Let's create a Context object in React. And the syntax is:<figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/702cd626890d97511f8c594b14bdf0fb.png" class="kg-image" alt loading="lazy" width="602" height="192" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-1.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/702cd626890d97511f8c594b14bdf0fb.png 602w"></figure>This EduAppContext object will be passed as an argument to the useContext hook. <figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/d59d6d8ab3e169e26dd039dd986b8f55.png" class="kg-image" alt loading="lazy" width="602" height="243" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-2.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/d59d6d8ab3e169e26dd039dd986b8f55.png 602w"></figure>Now let me give you an example of a music player to explore. This music player of mine will have a list of songs and the controls will be at the bottom. Now we should know which track is playing and whether the playing track is on play mode or pause mode.For this, we need React Context API which will store this information in its state. Then the turn of the useContext Hook that will make this state available to both components.I am creating a new File called MyPlayerContext.js<figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/e448bccdfc62cef7abd148d039ecf6e0.png" class="kg-image" alt loading="lazy" width="602" height="505" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-3.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/e448bccdfc62cef7abd148d039ecf6e0.png 602w"></figure>In this example, the React component is acting as a wrapper. We have set the context. The component is returning the provider in which the two components will be wrapped.In MyPlayerContext, it is clearly visible that no argument is passed to it. That means that the Context has no default value.The name of another new React component is MyPlayerProvider which gives us the provider. It also has no initial value.Because of MyPlayerProvider, the child components will be able to access the value of the Context's value. This provider will return the Context object which will be consumed by other components.At last, you need to export both the Provider and the Context.Create a Stateful ContextThe Context has no value, and we don't want it to have a static value. We will be giving it a state which will enable it to change its value. Here we will come up with the useState Hook.<figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/acb1e4bd269d57dcba96921c1bb2af63.png" class="kg-image" alt loading="lazy" width="602" height="433" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-4.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/acb1e4bd269d57dcba96921c1bb2af63.png 602w"><figcaption>MyPlayerContext.js</figcaption></figure>Above we are passing an array with 2 values. The first index contains an empty object and the second one contains an empty function.<blockquote>const MyPlayerContext = React.createContext([{}, () =&gt; {}]);</blockquote>useState Hook provides us with the state in which we will store multiple values.<blockquote>const [state, setState] = useState({});</blockquote>By putting the state object and setter function in an array, we will pass this array to the value of the Context Provider. That's why, when we created the Context above, we put an empty array and an empty function in it.<blockquote>&lt;MyPlayerContext.Provider value={[state, setState]}&gt;</blockquote><blockquote>{props.children}</blockquote><blockquote>&lt;/MyPlayerContext.Provider&gt;</blockquote>We will access the Context state by importing it into the component. After that, we will use the useContext Hook.<figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/28d4c55d7d022c8a01b73334df06b34a.png" class="kg-image" alt loading="lazy" width="602" height="284" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-5.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/28d4c55d7d022c8a01b73334df06b34a.png 602w"></figure><blockquote>Awesome!</blockquote>Update the Context?s stateLet's move on to App.js. Inside it, we'll import the new MyPlayerProvider component and wrap it around TrackList.<figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/4735065726b1804c92e9a47cd225f8de.png" class="kg-image" alt loading="lazy" width="602" height="517" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-6.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/4735065726b1804c92e9a47cd225f8de.png 602w"><figcaption>App.js</figcaption></figure>A new file will contain the TrackList component.<figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/91cdec195e102375c5a43cdfa94a9031.png" class="kg-image" alt loading="lazy" width="602" height="313" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-7.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/91cdec195e102375c5a43cdfa94a9031.png 602w"><figcaption>TrackList.js</figcaption></figure>MyPlayerContext will be imported into this file. As you see MyPlayerContext exports two values, so a name({MyPlayerContext}) has to be given while importing.setState in our Context will be called on click of a simple button. Here, useContext Hook will provide setState to us.? To store the value in the state, we are not using the useState hook, rather we are updating the key/value pair using a single state object.? Because of the single state object, we have to pass the existing object to the new state object, so that the whole object is not overwritten. This is the role of the ..state syntax here.If you go to your running React app and click the button, the label will change to "Clicked!" when you click the button.<h2 id="now-tracks-from-the-context-state">Now Tracks from the Context State</h2>Let me edit MyPlayerContext and pass initial song titles to the Context. I am doing this because my TrackList React component is empty.<figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/d2dfaeb93da0d4d926163d0381066bc5.png" class="kg-image" alt loading="lazy" width="602" height="577" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-8.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/d2dfaeb93da0d4d926163d0381066bc5.png 602w"></figure>In the MyPlayerContext where we are initializing the state object, we will pass an array of tracks to the argument of useState Hook.Now I'll simply map over new tracks array coming from the Context?s state. The map function will unwind the array and we will have one object for each track, and the key of the object called name.Track.name will display the track name inside the curly braces in the map function.<figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/61695de132376ef000f324b51913dc7f.png" class="kg-image" alt loading="lazy" width="602" height="555" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-9.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/61695de132376ef000f324b51913dc7f.png 602w"><figcaption>TrackList.js</figcaption></figure>Updating Context from One PlaceWhenever we have to use or update the state from the useContext Hook, it is mandatory to import the context. If you want to retrieve and update the state, that's fine, but if there's additional logic coming with state involvement, it will give the component a complicated shape.Take an example like this to understand a little more: Before clicking the play button on a track, you will see that the track is not already playing and if not you will click the play button.<figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/3466e6b0af7e01033024a173b6098dc8.png" class="kg-image" alt loading="lazy" width="602" height="236" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-10.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/3466e6b0af7e01033024a173b6098dc8.png 602w"></figure>This logic is very common for any music player app. Many components use this logic. So the logic must be in one place so that multiple components can use it.Now it's time for custom React HooksIn Custom React Hook, we add "use" before the name of the hook.Now we will create a new file useMusicPlayer. Through our useContext hook, we will access the state and setState variables, i.e. we need the context here.<figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/c68a7d22dca8e70d0e1d444c91161b8f.png" class="kg-image" alt loading="lazy" width="1264" height="708" srcset="https://techfastly.com/content/images/size/w600/2021/09/carbon--6-.png 600w, https://techfastly.com/content/images/size/w1000/2021/09/carbon--6-.png 1000w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/c68a7d22dca8e70d0e1d444c91161b8f.png 1264w"></figure>Having done all this, isPlaying value in the togglePlay function, which is basically inside the Context state, will return true or false depending on whether the track is already playing or not.functiontogglePlay(){setState(state =&gt;({...state, isPlaying:!state.isPlaying }));}Now we will add functions to play track, play next track, and play the previous track.<figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/53d316ad528486da8c0ce3a60ec777a4.png" class="kg-image" alt loading="lazy" width="602" height="580" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-11.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/53d316ad528486da8c0ce3a60ec777a4.png 602w"></figure>At the end of this custom hook, we are returning all the functions along with some variables.We get all these variables from the useContext Hook which we get from React.Now that we have all the useful functions in our new custom React Hook, let's edit the TrackList component a bit.<figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/774b666f4ebaaa644cecf6ae9fe14856.png" class="kg-image" alt loading="lazy" width="602" height="443" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-12.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/774b666f4ebaaa644cecf6ae9fe14856.png 602w"></figure>We have allowed the helper function of Hook's to interact with the context state, instead of having to import the key context directly.Event handlers can easily call functions, our React components are so linear.onClick={() =&gt; playTrack(index)}The turn of the music player controls, the component for that is the PlayerControls.js. Make this component with your own design.Also in this component, we are importing useMyPlayer Custom Hook so that we can get all helper functions that interact with the Context state.These child components must be wrapped in the MusicPlayerProvider or else we will not get the context state. So let's edit App.js.<figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/a04899385f4a29b156dabcb2f5e6efe7.png" class="kg-image" alt loading="lazy" width="602" height="496" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-13.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/a04899385f4a29b156dabcb2f5e6efe7.png 602w"><figcaption>App.js</figcaption></figure>In MyPlayerContext.js, make sure you enter default values in the Context state.<figure class="kg-card kg-image-card kg-width-full"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/a8420e349041c1be76dca36ac2fc8c1f.png" class="kg-image" alt loading="lazy" width="602" height="616" srcset="https://techfastly.com/content/images/size/w600/2021/09/image-14.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/a8420e349041c1be76dca36ac2fc8c1f.png 602w"></figure>You already know that you have to put the mp3 files in the src folder as well as instantiate the Audio object.So now you need to edit MyPlayerContext and import mp3 files. The useContext Hook is worth mentioning which we can easily access in our custom hook. You have to make the custom React Hook useMyPlayer interact with the audio object as well, and which you can easily do.

Hamid Akhtar

Importance of useContext Hook in React

Promisification word may sound complicated but it belongs to a simple transformation. This procedure basically converts a function that accepts a callback, into a function that returns a promise. This type of transformation is needed more often because you will find many functions and libraries callback-based.Indeed, Promisify benefits the development as the use of promise is convenient.Promise is an object and an alternative for a callback. With promise, you can handle asynchronous operations. Deeply nested structures formed by callbacks produce more maintainable code when converted to promises.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/93X9LrOimBq_wpFssr4tVgK3HaXWCOtUnbNu5U6HC-Ysfyu1nER8XoQJgmyOMO2S5MBMLXh7TRhyH8O_QLyClTqecaGmlD408kOMFLyJannS1En67MVeEDpqCFt1FfTJz2B1IYdE=s0" class="kg-image" alt loading="lazy"></figure><blockquote>The Promise constructor converts callbacks into promises.</blockquote>The Promise constructor is required to convert a callback to a promise. The callback of the Promise constructor takes two arguments: resolve and reject.Resolve callback should be invoked when the async operation has been completed. On the other hand, if there is an error then the reject callback is invoked. You will get the Promise instance from the constructor. 'then' is the method that notifies when the promise is completed. Promises actually do asynchronous callbacks and you can chain multiple async operations with it.Promises have a tendency to handle errors more elegantly.Before knowing how to convert callbacks to promises, you should also note what I have mentioned below.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh5.googleusercontent.com/EyA1fM_NDLMD6m2doN7EdhTv5MXRNaXWPHxGLzlDDC3e3n6D38uBCBVdUqc8GJXq3o4WK5WjjFh4cIEPIxCOovPr_RBaUDe986HedPKBHvjigpDUqLMirNWoaQ5XY9yLlerfRpw_=s0" class="kg-image" alt loading="lazy"></figure>See the snippet below, which shows that once a promise is resolved, it can no longer be rejected, i.e. out of resolve and reject, one method will be valid and only one method will be called.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/jNCRybKJydsiY2d0dSNi2gg48pE0W4FmYt59y6tBmVv19EhUHAHQLmX9-lzdVE7nvnl6EJgsSrsTmPtPyFC3u78Z8UUQlhCb6GbtVj9Ifg67S_yYt952d48wmuAGtKgio1J-SsVO=s0" class="kg-image" alt loading="lazy"></figure><blockquote>Let us now look at the different stages of promise</blockquote>Pending: When the async operation is running, i.e. still in progress.Fulfilled: Here the operation is successful and after that "then" callback will be invoked.Rejected: The operation has failed. If it fails, it will invoke ".catch(onError)" and ".then(..., onError)".Settled: Resolve and Reject callbacks no longer work here. Only .finally method is invoked here.The Promise API gives you three main methods. They are: then, catch and finally.When the asynchronous operation completes, the "then" method is invoked to notify you of the completion. The "then" method lets you know both success and failure. That is, it has two arguments: one for successful execution and another for error.promise.then(onSuccess, onError);Apart from this catch can also be used, something like:promise.then(onSuccess).catch(onError);Multiple promises can also be chained with "then" because it returns a new promise.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/d7lVCXbDIHW_TIJW0xHdEiwJ4hrxdnkYHYX754Xs8VuBLi2_O97Tftk9TTN7EgADAB1ryuVpECEFC5y_FeRAYfGoyfmwnksM0xwlofaqXLDIBmVgIf6LROCYxoWvfsq4uUGCkY-J=s0" class="kg-image" alt loading="lazy"></figure>Promise.resolve resolves the promise and will stop executing if the error breaks the sequence.Finally methodIf the promise is settled then finally method will be called.You can use "then" as well as "finally" if you need to execute a piece of code after a failure.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/Rpv2wynmxkg-KPspJylbj_dae19gPxPm91SH7Bmiu0RCpw-HWoNtAeJhVeTTFeZaTDgr0u2ekvWCocN9cNMU0rSkINY38uAwl60YYkP28YzRzofmb80tSRyKvZOk9DKRYYH8bFTr=s0" class="kg-image" alt loading="lazy"></figure><blockquote>Promisification</blockquote>loadMyScript is given the src to load the script. If an error occurs then callback(error) is called otherwise if no error occurs then callback(null, script) is called. <figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/20UWlfsCyV54MvDUcYSUGHEubW3DHyBfURbSKNY7yG-wq_W4VjrPLf5nBabJb3MOlIl-26tTeWPZ8auJ_Y3mt19mrmGtOKH126BF2FRCHfSGalkt5qTc7PLqvsnbDUk5-YaGIkuK=s0" class="kg-image" alt loading="lazy"></figure>Now it's time to promisify.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/gQZwWAfWIZkXEJbYk07xlk7EX7OEEZfIK3UEbuXxfPYSDGMlYjSY5-onDe8L2xBLtyLO1yIwQHi8GtzAD3Kv9djw2EXlikCCImVeNrXfCWJydEKO6age54Ho3BNCjp-YqewTGf4o=s0" class="kg-image" alt loading="lazy"></figure>For this, I created a function here. It will load the script as well. But here the promise will be returned, and not the callbacks.This new function is a wrapper of the original loadMyScript function.The loadMyScript function that receives the callback from this wrapper function translates to promise resolve/reject.Our new function loadMyScriptPromise is a perfect fit for promise-based code.It is not a matter of liking the promises more than callbacks, but rather some specific reasons which you will come to know while practising. Let me also discuss the points here:<ol><li>If you implement the callbacks and do something sequentially, then you have to specify an err argument in each callback. This is redundant. In a promise or async-await, you add a catch method or block. Now if there is an error in the chain of promise, it is caught.</li><li>Callbacks can cause memory leaks. Because you don't have control over it. When it would be called and under what context. And how many times. You don't know!</li><li>We don't face such problems with promises, especially if we talk about error handling.</li><li>Your code is also more readable and maintainable.</li></ol>Note: Promise is definitely a good approach when it comes to async/await. Even so, it cannot completely replace callback. Promise has only one result whereas callback can be called multiple times. That's why promisification is used only for those functions which call the callback once.One way is that you have to wrap a function around the original function which will return the promise. And another way is when we want to promisify more than one function. For this, we will use the helper which is a sensible way.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/iQikhBAebuJdbmjrT66OBVz8zSdDxiQBC7BZnCZYI5bIrxIqTXQ3WLdZtz5Ac-x3XHUrzkpjMX7RH9LeFM9_ccqi8ZJacbgbGYukszKvTS-YhiCsdGOeGcdrxVWjws9glTY_eiK-=s0" class="kg-image" alt loading="lazy"></figure>The code is complex to look at, otherwise, it is the same code that is written above when we are promisifying the loadMyScript function. promisify(f) is our helper function that accepts the function we have to promisify.You can see that it is returning a wrapper around f (*). The wrapper is also returning a promise and then the call goes to original f. Here the original f expects a callback with only two arguments. You can further modify the code to accept more arguments.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/uv9pL4xMaZff2oF8prTtQDPHz4d8n_35S18RkdNCfzXs1a4ea8ZxGyl0UvSlmk-ryQZREZkhZApQFLpnYWzpgAAGLEinZ-Ct-IjVRuJcevfFuKA8fRB-iu47V1iJ818vhxS-97wG=s0" class="kg-image" alt loading="lazy"></figure>Finally, I will discuss the Promisify function in Node.js and wrap up this articleBeing a Node.js developer means you already know about Promise. And especially how it works internally. You will find more modules to promisify functions such as es6-promisify. Node.js has built-in util.promisify function. The built-in util package in Node.js provides you with utility functions. In these utility functions, you get the promisify() function which enables you to use promise chaining and async/await.<figure class="kg-card kg-image-card kg-width-full kg-card-hascaption"><img src="https://lh6.googleusercontent.com/PXlgLTczAMCChXsCtpQQLld0DM1AOsp6A0C-k1LsUC_k35dseEsurZl6NqYtSR0VbnJelzUdb0-monUhTpYK4EfTT3W9uIhRY8VRbIdl5KDDzM9NzkQ-zD6SNLnNjAH9mp3Dzgwf=s0" class="kg-image" alt loading="lazy"><figcaption>fs.readFile function to be promise-based</figcaption></figure>

Premium reporting on technology, startups, VC funding, and software from Techfastly tagged with javascript. Read all about javascript here..

javascript

Promise, Promisification, Promisify Function

Higher-order components allow you to keep your React application well-structured and maintainable. We're going to focus on how pure function keeps your code maintainable and clean and how we can apply the same principles to React components.<h3 id="pure-functions">Pure Functions</h3>In a pure function, you will get all these properties that I am mentioning below.<blockquote>Whenever a pure function deals with data, it is declared as an argument.</blockquote><blockquote>When data is passed to a pure function, it does not mutate it.</blockquote><blockquote>If you give the same input to the pure function, it will always return the same output.</blockquote>Here is an example: function sum(x, y) {return x + y;}Now I will give you an example of an impure function:let y = 2;function fAdd(x) {return x + y;}See that this function is not pure as it is referencing data that is not passed to it directly. That is, you can take different outputs from the same input.let y = 2;fAdd(3) // 5y = 3;fAdd(3) // 6 One of the biggest benefits you can get from the pure function is that it makes testing or debugging any application easier. Occasionally it might happen that you also make impure functions that have side effects or you modify the behaviour of an existing function, which you were not getting direct access to.We need to look at higher-order functions now to modify the behaviour and get access.<h3 id="higher-order-functions">Higher-order Functions</h3>A function that returns a function when called is called a higher-order function. To a higher-order function, the function is often passed as an argument. But it doesn't matter whether the argument is passed or not, for any function to be higher order.We create a function sumAndLog in which we log the output to the console before returning it.function sumAndLog(x, y) {const output = sum(x, y);console.log(`Result: ${result}`);return output ;}If logging is important to us, we need to do the same for the subtraction function as well.This is where our higher-order function will come in handy and we don't have to duplicate the sumAndLog code. Higher-order functions give us an easier path. A higher-order function takes a function and returns a new function. It calls the given function, logs the output and finally returns it.function loggingAndReturn(func) {return function(...args) {const output = func(...args)console.log(Output, output);return output;}}Here, a higher-order function is accepting a function as an argument. And the same higher-order function is also returning a new function.const sumAndLog = loggingAndReturn(sum);addAndLog(4, 4) // 8 is returned, ?Output 8? is loggedconst subtractAndLog = loggingAndReturn(subtract);subtractAndLog(4, 3) // 1 is returned, ?Output 1? is logged;Now any function we pass, whether it is "add" or "subtract", the log will be added to both the functions.loggingAndReturn has become a higher-order function. The advantage of a higher order function is that if there is an existing function whose behavior is not to be changed, HOC will wrap it up and provide your solution.Now we come to React. We also use the same logic in React Components. That is, we can give additional behaviour to React components.It is also important to note that after hooks were introduced, the use of HOCs was slightly reduced. Because you can do behaviour sharing with hooks and for which no extra components are needed. Despite all this, the HOC proves to be a useful tool during development.Now let us discuss the React Router. I would suggest that you make sure to take a look at the React Router <a href="https://reactrouter.com/">documentation</a>.<h3 id="react-router%E2%80%99s-link-component">React Router?s Link Component</h3>React Router has a &lt;NavLink&gt; component that links pages together. Whenever the user is on a URL via &lt;NavLink&gt;, &lt;NavLink&gt; has a property named activeClassName that gives style to the URL.&lt;NavLink to="/contact" activeClassName="active-link"&gt;Contact&lt;/NavLink&gt;Now I'm going to create a component that will wrap this &lt;NavLink&gt; component.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh5.googleusercontent.com/nndXauYl6Ltc2aHFkuKQWHl00gy542t8fKsQV0tWQpnyM6KM1722NRUao9GudlVTqI84w58fKSV2fY5MMLG4Pg2UoEIbODfRlTfc2LtkMkOuJAgD6Ab1QefuDkQqKZ9HEd7Q-3OX=s0" class="kg-image" alt loading="lazy"></figure>Now look, I can write the same line which seemed verbose before, like this:<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/OM8pgAIfu5lv_VfCMvz8k95LmNUb3plZyQygRGmFSoIHJEsR_b1zacPHQn1EKSx7MJhUvFTmAH1YWqeme2rGja-SWfk02fEaA-6INGEz_mK5JQSIiWx8ifm2UMv9d604HR8hJmQO=s0" class="kg-image" alt loading="lazy"></figure>This is how a component is made a higher-order component in React, That is, by manipulating an existing component and not changing it, a new wrapper component is created, which is called a higher-order component.Apart from this, &lt;NavLink&gt; has many other properties. And they will also be needed while working, due to which we have to make the component more extensible.The syntax JSX used in React supports the spread operator. With the spread operator, you can pass the object to the component as properties.const props = { c: 6, d: 7};&lt;Foo a={props.c} b={props.d} /&gt; &lt;Foo {...props} /&gt;Here {...props} is the individual property of Foo and this property is the object within which the key is spread.By taking advantage of this trick, we can access any property of &lt;NavLink&gt;.And an even bigger advantage is that our wrapper component will already be supported if a new &lt;NavLink&gt; property comes along in the future.Sometimes we want similar behaviour across multiple components. I already talked about inserting the same behaviour above when I log the output to the console.Think of it this way that an application has an object that holds the current user's information and the user has got authentication on the system. Now you want some other React components to have access to this information as well. Here I would like to reiterate that not all components, just some, we need to be strict about who will access the information.For this, we will create a function to which a React component will be passed.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh6.googleusercontent.com/pJma-Jf7AmFeiuto-J7X9gnmn4fBOgIJGuJQOLZ0sDQuoOd6t-oqIX_KAsD47qTTdKwZJtXQlcm1Qv0zp1VzVIXdKxcNWLUWr9Auy_qO5Zo9ihYPNknQ3SDCw9s91Xyj2OabbGqy=s0" class="kg-image" alt loading="lazy"></figure>This function is returning you a new React component. This new component will be rendered with a new property that will have access to user information. Look at the above example carefully. In this, the component is getting an additional property named importantUserInfo.The &lt;AppMyHeader&gt; component will need this information in order to show the logged-in user.const AppMyHeader= function(props) {if (props.user) {return &lt;p&gt;You are logged in as {props.user.name}&lt;/p&gt;;} else {return &lt;p&gt;Login&lt;/p&gt;;}}You can access the user object by rendering &lt;connectedMyAppHeader&gt;.&lt;connectedAppHeader&gt; has got additional data that not every component will have.const ConnectedMyAppHeader = wrapWithUser(AppMyHeader);You can access the user object by rendering &lt;connectedMyAppHeader&gt;.&lt;connectedAppHeader&gt; has got additional data that not every component will have.This pattern is very common in React libraries and especially when it comes to Redux, there is much more to it.<h3 id="conclusion">Conclusion</h3>It feels good to conclude this article now because with this technique we can create a great codebase that will be very easy to maintain and creates peace for us on a daily basis.You can define the data of higher-order components in one place. The refactoring is so good that your data remains private and only data is exposed that the components really need.As the application grows, it will be beneficial for you to understand which components are using what kind of data.

HOC is Still Useful And Applicable in React

You can start JavaScript easily but you will have to struggle a lot to master it. It is old with obsolete features and flexible with mysterious syntaxes. So during development, you may stumble upon it many times. That's why I keep listing the features that can accelerate your development process.<h3 id="1-objectentries">1. Object.entries</h3>When you have to iterate over an object, you do it using Object.keys. With this method, you will get only an array of object keys.But if you use Object.entries you will get the keys as well as the values.const employee = {name: 'Kylie',age: 30};Object.keys(person); // ['name', 'age']Object.entries(data); // [['name', 'Kylie'], ['age', 30]]While iterating over the object you will also do something which is mentioned below:Object.keys(employee ).forEach((key) =&gt; {console.log(`${key} is ${employee [key]}`);});Object.entries(employee ).forEach(([key, value]) =&gt; {console.log(`${key} is ${value}`);}); // name is 'Kylie'// age is 30 Of the two, Object.entries are the easier and quicker approach.With the new Map() constructor, you can pass the entries of the object, something like this:const obj = { name: 'Kylie ', age: 42 };const map = new Map(Object.entries(obj));console.log(map); // Map(2) {"name" =&gt; "Kylie", "age" =&gt; 42}So you can easily convert objects to maps.<h3 id="2-string-replaceall-method">2. String replaceAll Method</h3>The replaceAll() method will match the pattern in the string, then replace it with the replacement provided by it.const str = 'The quick brown fox jumps over the lazy dog.';console.log(str.replaceAll('dog', 'monkey'));// expected output: "The quick brown fox jumps over the lazy monkey."The String.prototype.replaceAll() method replaces all occurrences of the string you want to replace.We also use RegEx but it would be easier to use replaceAll() method than you write like this: str.replace(/a/g, ?b?');<h3 id="3-instead-of">3. === instead of ==</h3>"==" is for automatic conversion when you need it whereas "===" does not support conversion."===" compares value and type, and is faster than "==".[20] === 20 // is false[20] == 20 // is true'20' == 20 // is true'20' === 20 // is false[] == 0 // is true[] === 0 // is false <h3 id="4-typeof">4. Typeof</h3>typeof returns the data type of the operand. The return data type is in the form of a string and represents the primitive type of a variable.<h3 id="5-constructor">5. Constructor</h3>JavaScript provides the Object() function by default.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh5.googleusercontent.com/DDB6EziT3kPH8BnZQLpoyK2DVVVNlgrm6oKzm0xp6aLu-T7zkasubkA2GpoutbYFxBOEqMqf3--6Vlknzti4-JYkVm7291kxi4OqP6ADSOInZmcvonlhWyw5Hm34PyLg7UjQgZhN=s0" class="kg-image" alt loading="lazy"></figure>The point to be noted here is that here Object is a function and not an object. Yes, there is an anonymous object inside it. If you access its prototype property you will get a reference to it.<figure class="kg-card kg-image-card kg-width-full"><img src="https://lh4.googleusercontent.com/qlk8kVDYaLLafd2wMG1NLR94pzX6F-5Fvl7njCVweuTX9GJnEyn2Fu0sl2SjzbEt1tMBdsRtuaA3-5ErQfCqke79M4IHi5x4UVXBAV61O6leFpafaipD98DRFGz5Kq3O8ofgJdd7=s0" class="kg-image" alt loading="lazy"></figure>The Object.prototype method has many more methods and properties such as toString() and valueOf().Let's reiterate one more point quickly if a function is the value of a property of an object, it is called a method. Simply put, a method is the property of an object.One of the important properties of Object.prototype for which I have explained to you so far is the constructor. The constructor refers to the "object" function.console.log(Object.prototype.constructor === Object); // true<h3 id="6-lexical-scope">6. Lexical Scope</h3>The scope in which the function scope accesses the variables from the parent scope is called lexical scope. The function is declared after the variable declaration. The child function is lexically bound to the parent function. Child functions can access variables from their parent scope to global scope but vice versa is not possible.// variable in the global scope:const userName = "Jonathan";// Call userName variable from getName function:function getName() {return userName;}Definition space is lexical scope, and not the invocation space. userName is defined in the global environment, so its lexical scope is the global scope.<h3 id="7-find-the-elapsed-time-between-two-function-calls">7. Find the elapsed time between two function calls</h3>The time name is passed as a parameter to the time method.console.time(?timer1?);var a = 15;var b = 30;for(let i = 0; i &lt; 1e6; ++i){[a, b] = [b, a]}The same parameter is also passed to the timeEnd method.console.timeEnd(?timer1?);Now you will know what a valuable tool this is because the timeEnd method will print out the time elapsed. You are getting the time between two function calls. Now you will be able to easily see the bottleneck and refactor the code. Many modern browsers support it. It's easier and better than getting the execution time manually.<h3 id="8-with-map-you-can-cast-the-values-in-an-array">8. With Map, you can cast the values in an array</h3>const numArray = [?5?, ?6?, ?7?, ?1.3412?, ?-4500.1137?, [1.4115]];const castedNumArray = numArray.map(Number);console.log(castedNumArray);//[[5, 6, 7, 1.3412, -4500.1137, 1.4115];You can call it the easiest and most elegant solution for casting an array of numeric values as strings. When you pass Number as a parameter to the map method, it calls the constructor for each array's value.<h3 id="9-remove-duplicates-using-one-liner-code">9. Remove duplicates using one-liner code</h3>If you want to remove duplicate values, this is an efficient way with only one-liner code.const numArray = [1,2,2,2,2,3,4,5,5,5,6,7];const fuitArray = [?apple?, ?banana?, ?apple?, ?banana?];Here a spread operator will be used which will expand the set and construct the array. An ellipsis of three dots(spread operator) expands any iterable whether it is an array or a string.const uniqueNumArray = [...new Set(numArray)];const uniqueFruitArray = [...new Set(fuitArray)];console.log(uniqueNumArray); // [1,2,3,4,5,6,7];console.log(uniqueFruitArray); //[?apple?, ?banana?];Read this <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">document </a>to go deeper.<h3 id="10-argument-properties">10. Argument properties</h3>You will be well versed with the arguments object inside the function. It is basically an array-like object. It means there is a list of arguments available inside the function which was passed while invoking the function. But there are some other interesting properties to mention here as well:arguments.callee refers to the function that is currently invoked.args.callee.caller refers to the function that invokes the current function.const init = function(){console.log(arguments.callee.name);console.log(arguments.callee.caller.name);} void function main(){init();}()//init//main Learning of the callee and the caller would be worthwhile as the concept is found in many compiled libraries.

10 Best JavaScript Super Cool Features

TechFastly is presenting this article to lead the way for you to understand why React became so popular in the market. If you are thinking of pursuing a career as a Front End Developer, you will want to know this beforehand. Let me tell you in advance, this is a beginner-friendly article that will get you all set to start React if you want to.<h3 id="react-is-a-library">React Is A Library</h3>React is a JavaScript library with which you can create user interfaces. The library here means that it is not a complete solution. The complete solution would have been if it was exactly a framework. React ignores other parts of the solution, for which you would need other libraries.The real purpose is derived from the framework. Frameworks contain ready-made design decisions, and they are smart enough to form a complete picture of the application-level logic in your mind. Conversely, a framework can hurt experienced developers if they work on large codebases. The framework will force developers to code a certain way. This leads to a tussle between the framework and the developers.Apart from this, the framework is large and full of features. You can't choose your needs freely and you have to pull the whole feature instead. Even though a lot of work is being done on this, it is not ideal. Some frameworks are converting to modular frameworks.React is a small library and focuses on building user interfaces. React follows the Unix philosophy and creates the interface for users to come and interact with the machine. Whether it's the buttons on your TV or the dashboard of the Space Shuttle, everything is UI.If the device you interact with understands JavaScript, we can use React on that. Now we've got browsers that understand JavaScript, so we build web UIs in React.All you have to do is tell React what you want and it will create the UI on your behalf. Creating a UI with native web API and JavaScript is not that easy.Whatever declarative descriptions we write in the React language, React will translate it into the actual UI in the browser. React is declarative and it shares its declarative power with HTML itself.At its release, there was doubt about the performance and the reason for this was the virtual DOM. Virtual DOM can reconcile with actual DOM. But, the most important reason why it is popular today is the performance. Most powerful thing is that it creates a link between developers and browsers, allowing developers to describe the UIs declaratively. You no longer need to act on DOM elements, you only need to act on the state of the UI. React automatically updates the UI whenever there is an action on the state.<h3 id="tree-reconciliation-algorithm">Tree Reconciliation Algorithm</h3>All the operations you perform in the DOM happen in a single thread, and this thread is responsible for everything that happens in the browser. It involves a lot of things like typing, scrolling, resizing etc. It simply means that as soon as you perform any expensive operation, you will get a janky experience.You need to keep in mind that your application should always perform minimal operations and batch them wherever possible. React targets this concept.When we render a tree of elements in React, React first creates a virtual representation of it and keeps it in memory. Now it performs DOM operations so that the tree can be viewed in the browser.If you want to update this tree, React will create a new virtual representation of the updated tree. This means that there are two versions of the same tree in React. Now the thing to see is that React will not discard what React has rendered before.That is version 1. Instead, it will compare both the virtual versions that are in memory.While computing the difference between the two, it will look at which sub-tree is to be updated. React will update only those sub-trees in the browser. This is called the tree reconciliation algorithm and is very effective for working with the DOM tree of the browser.Let me tell you that a ?virtual" browser is more friendly than a real browser. The DOM API is very difficult to work with. This is how React communicates with the DOM in your place.The biggest advantage of React is for a developer who has very good JavaScript skills as it does not take much time to understand the React API. That is, if you call React "Just JavaScript" then it will not be wrong. Instead, if you approach a library that has a bigger API, it will take you a lot of time to master it. The best part is that the React API has functions and optionally classes. That is, the UI view that will be created will become a function of your data.You can build native mobile applications with React Native. React will pay you off for iOS and Android mobile apps in the long run. Web, iOS and Android applications can share your logic.<h3 id="community">Community</h3>The React team at Facebook keeps adding new features and improvements so that the library is always better than ever. This maintains trust in the community. Production testing at Facebook is so strict that you won't find any serious bugs in any of the React releases. I think you are aware of the names of web applications that use React and they are Airbnb, Netflix, Twitter, and many more.<h3 id="wrapping-up">Wrapping Up!</h3>React is competitive with Vue and Angular, yet it has become the preferred choice for developers. React is declarative, its community is awesome. With React Native, you can easily cover Android and iOS once you have a clear understanding of the basic architecture of React. React is SEO-friendly and fully embraces JavaScript. React will also save you a lot of time as it gives you component-based programming. Once your component is created, you can reuse it.

Get Inner Knowledge Why We Should Learn React

Closure-Lexical Environment-Variable Environment

What's the closure? While preparing for the interview, you must have checked this question or should say that you should already know this question. The closure is really important in the functional programming world. You can access the outer scope of the function from an inner function. In other words, a closure is a bundle of a function and references to the surrounding state. The surrounding state means the lexical environment. Simply put it is in such a way that whenever the function is created, the closure is also created.<figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/Wft3lnXP4oZy6fp8wXRVM9-PLwmuG0gInJtLyyAZcIQiotxAv34_gBE-gEhcU0NgUT6TEdfVvdeNCXjtlszsmxTcU5c5ik3pl7QUI9nULwpeEWOaXQLscsPMmcSGmnFMdO9UEbrR=s1600" class="kg-image" alt loading="lazy"></figure> The interesting point here is that the anonymous function that is returning is not alone, but is taking a and b variables along with it. A single function is not executed, a record is executed. The lexical scope of the function also lives with it, i.e. overall closure is the return.Let us take some examples:function IncreaseNumber() {// Local ?free? variable that ends up within the closurevar num = 1;function fNumber() {console.log(num);}num++;return fNumber;}var number = IncreaseNumber();number(); // 2The function fNumber does not have a local variable of its own. But it has access to the external function, due to which the value will be logged to the console after the num is incremented.function fIntro() {var fStore = function() { console.log(strWord); }// Local variable that ends up within the closurevar strWord = 'Hi, I am Hamid!';return fStore;}var sayHi = fIntro();sayHi(); // ?Hi, I am Hamid!? Although strWord is defined after the anonymous function, it was in scope at the time of the function creation. Hence it is available while executing the anonymous function.We move to a higher level now.Going to a higher level means we want to know what is actually happening in the background. Because the variables remain accessible in the enclosing function(s), even when the same enclosing function has also returned. To understand its depth, we have to turn to an abstract concept called Execution context. <figure class="kg-card kg-image-card"><img src="https://lh5.googleusercontent.com/79dTyXkOnRJEpnySVsjbkw1Vaew6BQYxsDM0uukQ5S_HSYLULNc2UthpeCaBa6Z3J_Kf67kcWdqrlnlu0OspVecqW3gthPAQATjB9NabQ7Ikb_V0iXkQYULhdXuwNgtoGhc8PpYY=s1600" class="kg-image" alt loading="lazy"></figure>In JavaScript, one command is run at a time i.e. JavaScript is single-threaded. Javascript will only handle one execution context at a time. Browsers maintain execution context through the stack. Whatever you push into the stack, the last one will be executed first. Stack is a LIFO data structure: Last In First Out. An insertion or deletion can occur only at the top of the stack.The top item in the stack is the current or running execution context. Sometimes it may happen that one running execution context is suspended and another execution context starts running. That means the running execution context does not need to terminate for a different execution context to run.The running execution context may also get suspended. The suspended execution context subsequently resumes where it left off. Thus we will have a bunch of execution contexts running one after the other. Some of these pause in the middle and resume after a while. There must be some way to track the states so that we can manage the orders and execution of these contexts. The ECMAScript spec provides you with the state components which allow you to track the progress of the code in each context:Code evaluation state: It evaluates the code that is associated with the execution context. It is needed to perform code evaluation, suspend and resume.Function: Execution context evaluates the function object.Realm: A set of intrinsic objects. Realm is created after the Execution Context Stack is created. Realm provides access to the global environment. The Realm is created before the code is executed and is linked to all code related to the surrounding agent.Lexical Environment: A reference to the outer environment.Variable Environment: This lexical environment is just another fancy representation of local memory. In this, EnvironmentRecord holds bindings created by VariableStatements within this execution context.The most important point of all this is the "Lexical Environment Variable" as it explicitly states that it resolves "Identifier references" that are created by the code in its executable context. You can consider ?identifiers? as variables. The lexical environment manages the data within the code. It can be said that it gives meaning to identifiers.Console.log(x/70);Whenever x will get the value, the code will get the meaning and that would be possible through its Environment Record. The Lexical Environment consists of an environment record that contains all identifiers and bindings. Each Lexical Environment has its own Environment record.The inner environment refers to the outer environment that surrounds it. And the outer can have another outer environment. That is, one outer environment can have many other inner environments. The global environment is that lexical environment that has no outer environment. You will be definitely thinking about the layers of an onion.An environment can access the parent environment and the parent environment can also access its parent environment and so on. Thus, each environment has scope to access the set of identifiers and the environments forming a complete hierarchical chain is called a scope chain.We are not off-topic, it was necessary to cover everything to get close to understanding closure.A function has an execution context whose environment gives meaning to the function's variables and references to the parent environment. A reference to the parent environment makes all variables in the parent scope accessible to all internal functions. However, it does not matter whether the inner function(s) are called outside or inside the scope in which they were created. <figure class="kg-card kg-image-card"><img src="https://lh4.googleusercontent.com/R-VlR2HzbhJm2DwSUzk9xjOEwejZ-7JizwjCtHdcBVM_ku8q1ZQ0IHHDMoID1pO_FHLcoq7j0AB22PsvI5b3rDqBCeR3sgcy4xqvFVtCbBIxoF8huL1MY9bButzcZGjNs0Vwoeu0=s1600" class="kg-image" alt loading="lazy"></figure> You get 125 as the function test is invoked. 125 is actually the return value that is obtained by invoking the bar function. The bar function can access the free variable y even after foo returns bar because it has a reference to y through its outer environment. This outer environment is basically foo's environment. bar function can also access x as the foo has access to the global environment. This is called "scope-chain lookup".Final WordsExecution context is an abstract concept that the ECMAScript specification uses to track the runtime evaluation of code. There is only one execution context for the code to be executed at any given point in time.Each execution context has a Lexical environment containing identifier bindings(i.e. variables and their associated values) and a reference to the outer environment.The set of identifiers that each environment has access to is called the scope. If these scopes are nested, a hierarchical chain is formed called the scope chain.Each function has its own execution context which includes a lexical environment and this lexical environment gives meaning to the variables within that function as well as the reference to its parent environment. And when the function has full knowledge of this environment because the function has a reference to this environment, it is called closure.As soon as the enclosing outer function is called, it creates a closure. It is not necessary to return the inner function to create closure.A closure is defined statically by its location within the source code, so its scope is lexical.

Write for us

Subscribe to Magazine