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

Before Buying an NFT, Read The Terms Carefully

These NFT blockchain tokens are making quite a stir at the moment, and it is expected that the demand for them will only grow.Nevertheless, before you spend a dime on an NFT, or digital collectible, you should understand exactly what you're getting. <h3 id="nft-what-is-it">NFT: What is it?</h3>"Non-fungible token" is the abbreviation for "non-fungible token." Non-fungible tokens are digital assets that can be transferred across a blockchain. Because they can't be duplicated or divided, their uniqueness gives them a wide range of uses.In contrast, fungible tokens are those that are easily replaced by other identical tokens. One example would be cryptocurrency tokens, such as Bitcoins.Among the different types of NFTs, there can be different rules attached to them. These rules are referred to as Smart Contracts, which are governed by their programming code, which handles the transfer of ownership of NFTs. Presently, we're seeing NFTs mainly used for selling "digital collectibles" such as digital art, articles online, music, tweets etc.<h3 id="are-you-buying-what-you-say-you-are">Are You Buying What You Say You Are?</h3>You're paying for a unique item when you purchase an NFT from one of the many NFT marketplaces. To put it another way, you're paying for a very short digital record (approximately a few bytes in size, and commonly containing a serial number or URL) to be transferred to your blockchain address. That is all there is to it.Owning this token allows you to establish that you own a certain item and that the object you own is genuine?similar to having an authentication certificate.Unless you sell (or gift) that NFT to someone else, no one else can have it.Having custody of a house's deed is equivalent to owning an NFT. The deeds, not the house, constitute an ownership record. In the same way, an NFT is a record of an asset's ownership or validity, not the asset itself.<h3 id="heres-what-an-nft-isnt">Here's what an NFT isn't</h3>An NFT isn't a digital asset in and of itself. The NFT is not the picture file if you purchase the NFT for a work of digital art. Authenticity records or ownership records are the only records that are stored on a blockchain. The image file will be stored on a different server.It would be the same as buying a limited edition print of a photograph. When you own the print, you would not own the copyright to the photograph. You couldn't sell your own photo reprints.In addition, you couldn't sell your own reprints of the photo. It couldn't be used for commercial purposes either. But, the fact that you own an authentication certificate makes your print more valuable.An NFT by itself does not automatically grant you any rights to any of its intellectual property. By default, the original author of the work (whose record is stored in the NFT) retains ownership of the copyright.If there are no additional terms or written agreements, you get very few rights by default.<h3 id="terms-associated-with-nfts">Terms Associated With NFTs</h3>There are often additional terms that come with NFTs that outline just what you are able to do with your purchase. Because of this, it's imperative that you read and understand the terms of each NFT you buy.CryptoKitties creator Drabble Labs Inc. has developed a simple license that describes what you can and cannot do with an NFT. You own licensed content rather than any copyright. This license makes this very clear.The ?NFT License? does not automatically apply to all NFTs, but any NFT project can adopt it if they wish. Different types of licenses will likely be developed in the future.Before you buy an NFT, read the terms carefully to make sure you know what you can and can't do with it.<h3 id="why-might-it-go-wrong">Why Might It Go Wrong?</h3>When buying NFTs, there are a bunch of options that might go wrong.NFTs are still in their early stages of development. Traditional purchase methods are currently unprotected by legal frameworks. If an NFT author, for example, rips you off by producing extra copies of your "unique" digital product, you will probably have little recourse.Likewise, when buying NFTs you should check to make sure the seller has the right to sell ownership or outright copyright. A transfer of ownership should certainly be documented in writing, so it's protected by the current legislation.Second, many NFTs simply provide a link to the desired digital object. You may lose the value of your NFT if this link breaks, expires, the owner redirects the URL to another address, or if the hosting account is not extended. NFTs are increasingly being hosted via IPFS, which greatly mitigates this risk.Third, an NFT you buy could come with excessive royalties. This means that if you sell the NFT to a third party, the author may receive a significant amount of the proceeds. This is something you should look into before purchasing your NFT.<h3 id="still-interested-in-that-nft">Still interested in that NFT?</h3> NFTs are the craze of 2022, and you need to know what you're actually getting when you buy one.A lot of promises have been made in this space, and that has sparked speculation. With this in mind, think about the hazards before you spend your money, and do your homework before buying something.It's imperative for you to have the knowledge needed here, from what a blockchain is to how you can use the assets you purchase.<blockquote>PS: This is not an investment advice. This is purely the opinion of the writer.</blockquote>

Write for us

Subscribe to Magazine