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

As Web 3.0 becomes an absolute reality, resources, content, applications and protocols will become accessible to all.

Web 3.0 and Crypto Adoption: A Way Bigger than Expected

What will your life be like if the devices and connectivity are removed? You have to pick up your friend at the chaotic airport area. You have to order food from some restaurant. You need to send money to any of your relatives urgently. And when I am away from the apartment, or away from the office, then how can I monitor my places. Considering all these things, now understand the power of Web 3.0.We are becoming dependent on the web day by day. Increasingly, the functionality is improving. Because in the beginning websites were static pages and contained all the basic information. But these static pages were the repository that you used to get the information you wanted. The next advancement gave birth to Web 2.0. It gave you a more interactive version. Your conversation with other content creators started. Like-minded communities began to congregate in large numbers on social media websites such as Facebook, YouTube and Flickr. The affinity created by it led to increased collaboration around the world.You may not be aware but you are reaping the benefits of Web 2.0 and 3.0 simultaneously. Web 3.0 includes internet-enabled mobile devices and the merging of sensors, built-in crypto wallets, and self-sovereign identities. And this is the web of tomorrow.Web 3.0 connects mobiles, appliances, cars, home entertainment systems, music all these devices and decentralized networks (cryptographic keys, distributed databases). It also incorporates advancements in reasoning and machine learning (which yields products like Alexa, Siri, Cortana). Siri and Google Assistant will give you weather information in the coming times. They will also inquire about an available dinner reservation from your mobile before sending cryptocurrency to a friend who works in Ireland.<h3 id="web-30-and-the-internet-of-things">Web 3.0 and the Internet of Things</h3>Tesla's over-the-air fix is an example of Web 3.0 syncing with the ?Internet of Things? (IoT). Owners in America had received a recall notice that a charger plug needed to be fixed as it caused the fires in the car. There was no need to schedule servicing and owners did not even realize that Tesla had remotely upgraded software that remedied 29,222 cars of the hazard. It is the flow of connectivity that is shifting from Fitbits to "life-enhancing" activities that have a clear value proposition. Immediate cost saving is apparent in IoT applications and yields brand differentiation and loyalty.<h3 id="gateway-to-crypto-and-web-30">Gateway to Crypto and Web 3.0</h3>Now let's talk about the integration of cryptocurrency wallets in the web 3.0 browser. Crypto Wallet holds crypto coins and provides a secure, private, digital space. It acts as a single login for all Web 3.0 decentralized applications (called Dapps).If you are thinking about bitcoin, it is not an asset that you would use for day-to-day transactions. Crypto coins also include specific gaming coins that are used to purchase in-game virtual goods such as 'skins', weapons or vehicles. On many platforms, if time is spent in the game, you will get tokens that can be used that you earn on in-app purchases to create a "circular economy". You can buy, sell and keep the sword as a memento. Tokens can also be rented out to another player. Crypto facilitates the transactions and the goods are stored in your wallet.Whatever progress is seen in technology in today's era, it has been integrated by Web 3.0. Whether you are gaming or trading or buying next-generation sporting event tickets, you need a crypto wallet.Just to reiterate, Web 3.0 brings openness and transparency, so does blockchain. Blockchain means the insights organized in the form of blocks and the cryptographic hash assigned make them secure and immutable. As Web 3.0 becomes an absolute reality, resources, content, applications and protocols will become accessible to all. Decentralized options will make the world more inclusive.Blockchain is paving a way to democratize the Internet. Thus, DApps and smart contracts will eventually automate specific processes. And this is where the top crypto players come into play and will bring the best of technology to contribute to the Web 3.0 ecosystem.<h3 id="crypto-investments">Crypto Investments</h3>There is a strong connection between blockchain technology and Web 3.0 which further leads to a specific cryptocurrency and investment-specific approach.For example, Ethereum is one of the most popular Web 3.0 blockchains whose role is to help developers with decentralized apps. Because of this, it has largely come under the radar of long-term crypto investors. Apart from this, there are many more examples when it comes to the relevance of Web 3.0. And some of these chains include The Graph, Filecoin, Helium, LivePeer, and more.Because of this high-level crypto-internet connection into the world, a lot of investments are going to be busted in this deep well and that will not be financial superpositions. The entire crypto investment sector is backed by tech-based facts. You can easily find many precedents.<h3 id="mainstream-crypto-adoption">Mainstream Crypto Adoption</h3>Because the technology is multivariate and complex, a complete merger can take time. Some of the top crypto players driving the Web 3.0 boom such as Helium, Flux, Kadena, and more, follow the tried and tested, proof-of-work consensus model.The Web 3.0 incentive token is expected to attract some well-rounded attention as the global bias shifts towards non-fungible tokens and creator monetization. The global streaming industry is estimated to be worth $250 billion by the end of 2026. Although developers are developing decentralized platforms and apps and give a kickstart, you still have to wait for proper mainstream adoption.<h3 id="wrapping-up">Wrapping Up</h3>Crypto players are opening up to Web 3.0 and its own ecosystem can breed the requisite applications and resources. Even if trading, exchange value and investment are kept separate, crypto players will still be directly connected to the Web 3.0 renaissance. Web 3.0 will change the thought stream of those people in the coming time who are not welcoming this concept. Investing in cryptocurrencies will be seen as mere byproducts and the concept will prove to be a way bigger.

Write for us

Subscribe to Magazine