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

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

Let's start with a refresher of Flutter's architecture. Flutter architecture is a multi-layered system. We can easily use the higher layer whereas the lower layer is complicated but it gives more control to your hand. Sometimes the higher layer doesn't work for me, I move to the lower layer, and it works. You will have access to all the layers on top of the Flutter Engine. <figure class="kg-card kg-image-card"><img src="https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/29bbd80f65b86367286b3f95d2ff5388.png" class="kg-image" alt loading="lazy" width="800" height="610" srcset="https://techfastly.com/content/images/size/w600/2021/09/img1.png 600w, https://iaxds62ruoojbg1k4180.cleaver.rocks/images/posts/29bbd80f65b86367286b3f95d2ff5388.png 800w" sizes="(min-width: 720px) 720px"></figure>You can do a lot of things with a little Flutter code.Flutter Engine is the lowest-level library in Flutter, dart:ui. It doesn't know about widgets, physics, animations or layouts. Yes, it knows about text layout. It can compose pictures and convert them into pixels. It is very difficult to write applications on top of dart:ui. This is why higher layers exist.Whatever exists on top of dart:ui, we call it a framework. And everything below it is called "the engine". The engine is mostly written in C++, the rest Android-specific part is written in Java, and for the iOS-specific part, Objective-C is used. The basic classes and functions inside dart:ui are written in Dart which mostly act as a bridge between Dart and C++.Flutter also has a plugin system. The plugin language has direct access to OEM libraries and third-party libraries. These are libraries that have accumulated over time. If we talk about Android, then the plugin has to be written in Java or Kotlin. If we want to write an iOS plugin, then we have Objective-C or Swift for that.To run Flutter, we have to run Dart on the web because Flutter is written in Dart itself.You don't have to run all of Flutter's code on the web as there will also be some platform-specific code such as the Android and iOS bits.The web platform has evolved a lot in today's era and has brought with it many technologies and specifications. I would definitely like to name some popular features like HTML, Javascript, CSS, SVG, WebGL. Also, you need to see what subset you want for your web features. Because on the web platform you will find many such features which will give you the same output. As far as graphics are concerned, you will get graphics from SVG, Canvas, HTML+CSS and WebGL.Dart has always been compiled to JavaScript. There are many applications that continue to be built in Dart and run in production after being compiled to JavaScript. Flutter's compilation strategy is based on the same infrastructure.As you start exploring Flutter, you'll be faced with several UI rendering options.Now I will share 2 prototypes that I created to get a practical understanding.Widgets: Flutter's widget framework gives you a set of core layout widgets. This allows you to create custom widgets. It supports the built-in capabilities of the web for layout and positioning such as grid layout, flexbox, overflow: scroll etc.Flutter Web Engine: In this prototype, all the layers on top of dart: ui will be retained. There will be an implementation of dart: ui that will run in the browser. With this prototype, you'll get the high level of portability you've come to expect, and your highest framework-level code will be reused between platforms.The best feature of Flutter is that it is portable across all platforms. You also write platform-specific code, but you can also share the same code across platforms. That is, your single codebase will target multiple platforms. The UI is rendered one frame at a time. In each frame, the widget will be created and the layout will be ready and painted on the screen.Building widgetsThe process of creating widgets is instantiated in-memory objects and then the process checks changes in state. This process computes the minimum updates that are necessary for the lower level of the system, layout and painting. The Dart team implemented super-mixin support in dart2js, which compiles the widget framework to JavaScript.LayoutSpeaking of layout, it's tricky. Text layout in particular is quite challenging. For a paragraph, you have to create a Paragraph object. You would then call its layout() method. You won't find the direct text layout() API. If you want to measure text layout properties, layout it on the browser and then read back the corresponding properties from the DOM elements. If you want to know more details click here. <a href="https://api.flutter.dev/flutter/dart-ui/Paragraph-class.html">More Info</a>. GPU Accelerated CanvasesFlutter renders each pixel on the screen. This will give you the advantage that you will know what kind of app it is going to be. Rendering every pixel doesn't mean the performance will be hefty, not like that at all. Hmmm, as we render raw HTML? definitely not that way. I want to draw your attention to GPU accelerated canvases that shore up the performance. In Flutter, you layout the widget with a certain font. Flutter controls any number of widgets on a per-pixel basis.Dart LibrariesFlutter has full access to the Dart library running on the web as of today.Javascript LibrariesDart's js-interop packages are fully supported in flutter i.e. dart:js and package:js.When you start working on Flutter, you will know that it might be recommended to avoid CSS to make your code portable across all platforms.<h3 id="final-words">Final Words</h3>The Flutter community is working to transform the app development process around the world so that we can reach more rapid deployment across platforms from a single codebase. Try to explore as much as you can, especially for portability. And see how you can embed non-Flutter components (react components and angular components) as well.

What is Shouting The Most on The Web: Flutter

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. Read about the ten super cool features that can accelerate your development process. 

10 Best JavaScript Super Cool Features

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.

Write for us

Subscribe to Magazine