The Development Factory

Why we need object destructuring? Object destructuring is required to extract object properties so that we can use it in a simpler way and don't need to tap into the values of object. Basic Object Destructuring Object destructuring  use value of properties without using dot notation , which makes the code easy to write and makes the code smaller. When we extract the value from the object , the key and name of the variable in which the property value will be there must be same or else it will throw the error of undefined. Using a new variable name We can also rename the variable name by colon , and use the value of property in the different name of the variable , this cannot be done in array destructuring as we can  variable with anything , so it would be not needed. Variables declared before assigned When you are destructuring in the object , you need to use the same variable as the keys in the object as to proper destructor the array and wrap the entire expression into t...

  How to do the Array Destructuring? Destructuring is the way to unpack the values from the object and array and use them without facing the complex code every time . It is used to extract values instead of pointing to each and every value every time we use them. Let's first look at the array destructuring, Why we need array destructuring? Array destructuring is used in many ways and first look at the complex method of extracting the values so that we can compare how destructuring makes our lives much better. So, this is the way we used before destructuring and ES6 module . Now let's see the simpler way of extracting the values. Basic Array Destructuring This is the Basic destructuring where in array we are putting out the values in the continuous manner with any given name just like the variables and using them anywhere. Declaring variables before Assignment We can also declare the variables before assigning into the array values . This works the same , the way in basic destr...

Introduction Earlier , we talk about what are useEffect hooks and why we should use them in our application, to handle side effects like handling http requests , setting timers and intervals and many more . Why useEffect has place so much importance in react?  you must know the answer to this question , only then using useEffect will be fun to use in react application and writing code with the understanding is much more important than just cramping the syntax of the concept. There are three case scenarios in which the useEffect hook can be used and provides the much code flexibility 1. UseEffect runs only once This is the case scenario in which we want to run the useEffect hook only when the page loads initially and then it never changes. The side effect function in the useEffect hook will only run in initial render and will not re-render useEffect hook , if any state changes or component re-evaluated. Let's look at the example of the useEffect hook below, So, you see when you run ...

  Explanation of the side effects in react Earlier , what we do is bringing something directly to the web browser , user interaction to the web page and state updates whenever some input or event triggered with the button click which we what we do with useState and prop value in react. React only cares about the render and re-render the component , this what react is all about by handling jsx code , evaluating the component and with the state and prop changes because of the user interaction. But when we talk about handling http request , fetching data from backend servers , timers and intervals to which react doesn't care about , it doesn't render directly to the web browser even if we put http request directly to the component that in result create infinite loop eventually if we update state after fetching the response and can also lead too many http request with the rendering . So , using these side effects can create infinite loops and bugs to the react app. Side effects in ...

  Introduction The react useCallback hook is used for the performance optimization and it memoized the function which doesn't cause the re-render of component , if one of the dependency is not changed. You can think memoized as cached the function instance so it doesn't need to re-calculate the resource intensive function. UseMemo and useCallback both are used for the performance optimization but the main difference between them is useMemo memoized or cached the value and the useCallback cached the function instance. Let's look at the example of the useCallback to make it better understand by you. In this example below , I have created a small react app where todo will be stored and the addNewTodo is the function which add the todo whenever in the todo component todo added , there is also and increment which increment the count and both todo and the count value are shown in the web browser. So , the problem is whenever we increment the count addNewTodo function also call wh...

What is Use Memo Hook in React ? Use memo hook in react is used to  memoized the result of the function which contains the expensive calculation , that does not causes slow down of the component so we wrap the function in the useMemo hook Whenever the function runs on the initial render , useMemo runs the function and calculate the value of the function but when the component re-renders , if from the dependency list none of the dependency changed , it will just used the cached value of the result and will not calculate in re-render. UseMemo is very useful and we can also memoized any data from the component , not just the functions we can memoized any object or data . Although , useMemo is particularly for the expensive calculation in functions. Let's see an example , how to use UseMemo hook in reality? How to use UseMemo Hook in react? UseMemo hook is a function and takes the function as a first parameter , it wraps the function and stores into it and in the second parameter we li...

  UseState with Object So, in this article will gonna talk about the how to use useState hook with object , previously we talk about the useState with array and simple implications with some example and have looked why state management is important in react. If you haven't checkout the blog , please look into that or for other articles so then you can clearly understand further. Let's start with our discussion , first create the react-app and import the useState hook from the react library and as we do always to initialize and destructuring into array which is two values , the current value of the state and setter function which can be named according to your preference just like we name the variables. Now , initialize the object in the useState as a default value and also specified the properties with equivalent to the name attributes of the name field , so the confusion will not be there and if you wanted then can also name according to yourself. In the example below we are t...

  Introduction Previously, we discussed what is useState array and how to use it by updating the state with the setter function. We can use useState and setting any default value with putting value of any datatype which can be primitive or reference datatypes , that is javascript specific and not the react thing. So , let's start our discussion for how to use useState with Array with an example. I will also provide you the code Sandbox link later in the blog post , where you can also play with the code and try with yourself. First Step First you need to create the react app , and import the useState from react by named export. After importing useState from react , you need to set the default value to useState an empty array , because it's the declaration that needed to be done and later the state can update according to default value specified to the useState Second Step Now , I have created an example for you in this step so this will clearly fit in your mind and this make you...

Introduction In React, state management is the crucial topic and without this topic , react cannot re-render or revaluate the components. React is all about the state management , we can do the state management in react with React Hooks and Redux. Why State Management? Once , you initialize the react app and run on the browser it will render all the html , components in the react and the sub components only in single page. React doesn't reload when variable initialize again or when some datatype changes with some result also not in  conditional statements  neither in loop statements. React renders all the code only for once, and for this need to not reload the page again when some variable changes , it only changes that block of statement or component whenever the state changes. State management can be done with useState , useContext , useReducer and with Redux library for advance state management. But in this article we'll only discuss about the useState hook deeply and ...