In this article, we are going to see how to customize the instance value of the ref object.Both useImperativeHandle and useRef hook allows to pass the ref object but the latter one doesn’t allow to customize the instances that are also passed with the ref object. useImperativeHandle hooks is different from the useRef hook in majorly two ways −It allows handling and customizing the returned value explicitly.It allows you to replace the native instances of the ref object with the user-defined ones.SyntaxuseImperativeHandle(ref, createHandle, [deps])ExampleIn this example, we are going to build a custom Button Component that has a user-defined instance attached ... Read More

In this article, we are going to see how to set up side-effects or HTTP requests in a functional component.This hook is used to set up subscriptions, handle side-effects or to send analytics data to the server. It is the combination of componentDidMount, componentDidUpdate and componentWillUnmount methods of class-based components. The function passed to this hook will run only after the component is rendered.SyntaxuseEffect(()=>{}, []);()=>{} − Function passed to this hook[ ] − It tells the hook when to re-render the component. For example −[props] − If props values are changed then this hook is called again.[ ] − This ... Read More

In this article, we are going to see how to debug the custom hooks with the useDebugValue hook in ReactJS.This hook provides custom labels to custom hooks so as to make the process of debugging easier and efficient. It is only called when the React Developer tools are toggled on.SyntaxuseDebugValue(value, ()=>{})ParametersValue − Label for the custom hook.()=>{} − Function to format the label.ExampleIn this example, we will build a React application that displays a custom label for the custom hook of our React application.App.jsxfunction useCustomHook(val) {    const [value, setValue] = useState(null);    useDebugValue(value ? Not Empty : Empty);   ... Read More

In this article, we are going to see how to access the data without passing it through every parent component in the React Lifecycle.This hook is the better replacement of the Context API of the Class-based component which is used to set the global data and this data can now be accessed in any of the children components without the need to pass it through every parent Component.Syntaxconst authContext = useContext(initialValue);The useContext accepts the value provided by React.createContext and then re-render the component whenever its value changes but you can still optimize its performance by using memoization.ExampleIn this example, we ... Read More

Range SumRange sum rangeSum(i, j) is defined as the sum of the elements in an array between indices i and j (i ≤ j), inclusive.ProblemWe are required to write a JavaScript function that takes in an array of Integers, arr, as the first argument and two numbers, upper and lower as the second and third element.Our function is supposed to return the number of range sums that lie between the range [upper, lower], (both inclusive).For example, if the input to the function is −const arr = [1, 4, 3]; const upper = 5; const lower = 2;Then the output should ... Read More

Increasing SequenceA sequence of numbers in which each succeeding element is either greater or equal to the preceding element is an increasing sequence.For instance, 4, 6, 8, 9, 11, 14 is increasing sequence 3, 3, 3, 3, 3, 3, 3 is also an increasing sequenceProblem:We are required to write a JavaScript function that takes in a 2-D array of numbers, arr, as the only argument. Our function should find and return the length of that longest path in the array that contains only increasing numbers.For example, if the input to the function is −const arr = [    [4, 5, ... Read More

ProblemWe are required to write a JavaScript function that takes in an array of Numbers, arr, as the first argument and a single number, num, as the second argument.We should, by adding elements to it, make our array such that any sum can be obtained by adding specific numbers from it between [0, num] (including both). Our function should finally return the minimum number of numbers required to add to the array so that it can produce any sum between 0 and num.For example, if the input to the function is −const arr = [1, 5, 10]; const sum = ... Read More

Increasing Numbers:A sequence of numbers in which each succeeding element is either greater or equal to the preceding element is an increasing sequence.For instance, 4, 6, 8, 9, 11, 14 is increasing sequence 3, 3, 3, 3, 3, 3, 3 is also an increasing sequenceProblemWe are required to write a JavaScript function that takes in an array of Numbers, arr, as the only argument. The function should check whether there exist three consecutive elements in the array that are increasing.For example, if the input to the function is −const arr = [4, 1, 5, 7, 3, 1, 4];Then the output ... Read More

ProblemWe are required to write a JavaScript function that takes in an array of strings as the only argument. The function is supposed to return an array of arrays of all the index pairs joining the strings at which yields a new palindrome string.For example, if the input to the function is −const arr = ['tab', 'cat', 'bat'];Then the output should be −const output = [[0, 2], [2, 0]];Output Explanation:Because both the strings ‘battab’ and ‘tabbat’ are palindromes.ExampleThe code for this will be −const arr = ['tab', 'cat', 'bat']; const isPalindrome = (str = '') => {    let i ... Read More

ProblemWe are required to write a JavaScript function that takes in a single Integer, num, as the first and the only argument. Our function should prepare an array for every number between 0 and num (including both of them), for each number, the corresponding element should be the number of 1s contained in the binary representation of that number.For example, if the input to the function is −const num = 4;Then the output should be −const output = [0, 1, 1, 2, 1];Output Explanation:Because 0 contains 0 1s in its binary form 1 contains 1, and so on.ExampleThe code for ... Read More