ProblemWe are required to write a JavaScript function that takes in a nested array, arr (nested up to any level) as the only argument.The function should calculate the weighted sum of the nested array and return that sum.For calculating nested sum, we multiply a specific element with its level of nesting and add throughout the array.For example, if the input to the function is −const arr = [4, 7, [6, 1, [5, 2]]];Then the output should be −const output = 46;Output Explanation:The sum will be calculated like this −(4 * 1) + ( 7 * 1) + (6 * 2) ... Read More

ProblemWe are required to write a JavaScript function that takes in a single integer, num, as the only argument. Our function should check whether this number is a valid power of 4 or not. If it is a power of 4, we should return true, false otherwise.For example, if the input to the function is −const num1 = 2356; const num2 = 16;Then the output should be −const output1 = false; const output2 = true;ExampleThe code for this will be −const num1 = 2356; const num2 = 16; const isPowerOfFour = (num = 1) => {    let bool = ... Read More

ProblemWe are required to write a JavaScript function that takes in an Integer, num, as the first and the only argument.Our function should break these integers into at least two chunks which when added gives the sum integer num and when multiplied gives maximum possible product. Finally, our function should return this maximum possible product.For example, if the input to the function is −const num = 10;Then the output should be −const output = 36;Output Explanation:Because 10 can be broken into 3 + 3 + 4 which when multiplied gives 36.ExampleThe code for this will be −const num = 10; ... Read More

ProblemWe are required to write a JavaScript function that takes in a string of lowercase english alphabets as the only argument.The function should construct a new string in which the order of consonants is reversed and the vowels hold their relative positions.For example, if the input to the function is −const str = 'somestring';Then the output should be −const output = 'gomenrtiss';ExampleThe code for this will be −const str = 'somestring'; const reverseConsonants = (str = '') => {    const arr = str.split("");    let i = 0, j = arr.length - 1;    const consonants = 'bcdfghjklnpqrstvwxyz';   ... Read More

ProblemWe are required to write a JavaScript function that takes in two arrays, arr1 and arr2 as first and second arguments respectively.The function should find the intersection (common elements between both) of the arrays and if there are elements that appear twice in both the arrays, we should include them twice in our result array as well.For example, if the input to the function is −const arr1 = [2, 7, 4, 6, 7, 4]; const arr2 = [7, 1, 9, 7, 4, 5];Then the output should be −const output= [7, 7, 4];ExampleThe code for this will be −const arr1 = ... Read More

In this article, we are going to see how to optimize a React application by passing a memoized function.This hook is used to optimize a React application by returning a memoized function which helps to prevent unnecessary re-rendering of a function. This hook stores the cached value of the function and only updates the function if the passed dependencies changes.Syntaxconst memoizedCallback = useCallback(() => {doSomething(a, b); }, [a, b], );Here, doSomething() function will only be called again on the next re-render if the values of a or b changes; otherwise only the cached version of the function is passed.Note: useCallback(fn, ... Read More

In this article, we are going to see how to increase the performance of React application by rerendering the component only when the props passed to it changes or on when certain conditions are met.This method is majorly used to take an exit from the complex React lifecycle, but using it extensively may lead to bugs in the application.SyntaxshouldComponentUpdate(nextProps, nextState)By default, the return value of this method is true; but if it returns false, then the render(), componentWillUpdate() and componentDidUpdate() methods are not called.Example 1In this example, we will build a React application with components only getting re-rendered if the ... Read More

In this article, we are going to see how to execute a function after the component is updated and before rendering it to the DOM.This method is called before the rendering of the component and after it is updated. This method is majorly used to compare the previous state or the previous props of the component with the new state or the new received props. The value returned by this method is passed as an argument to the componentDidUpdate method.SyntaxgetSnapshotBeforeUpdate(prevProps, prevState)ParametersprevProps − Previous props passed to componentprevState − Previous state of componentExampleIn this example, we will build a React application which ... Read More

In this article, we are going to see how to execute a function before the component is rendered.This method is called before the rendering or before any updation of the component. This method is majorly used to update the state, before the rendering of the component, which depends upon the props received by the component. This method is called on every rerendering of the component.Syntaxstatic getDerivedStateFromProps(props, state)Parametersprops − Props passed to componentstate − Previous state of componentExampleIn this example, we will build a React application which will fetch the list of users and on clicking the 'fetch user' button, the ... Read More

In this article, we are going to see how to execute a function if some error occurs in the component.This method is called when a component encounters some error during the React Component Lifecycle. This method allows us to handle the error boundaries of the application. To avoid performance issues, don’t set up any side-effects in this method.Syntaxstatic getDerivedStateFromError(error)It accepts the error as a parameter that was thrown as a component.ExampleIn this example, we will build a React application that displays the contained Comp1 component if no error occurs; otherwise it displays some text. But here, in Comp1 component, error ... Read More