DEV Community: nikhilkalariya

React Js hooks

nikhilkalariya — Tue, 30 Jul 2024 13:16:46 +0000

1. useState Hook
Example: Counter Component

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

2. useEffect Hook
Example: Fetch Data from an API


import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>Fetched Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetcher;

3. useContext Hook
Example: Theme Context


import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>Themed Component</div>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

export default App;

4. useReducer Hook
Example: Counter with Reducer


import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const CounterWithReducer = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default CounterWithReducer;

5. useCallback Hook
Example: Memoized Callback


import React, { useState, useCallback } from 'react';

const Button = React.memo(({ onClick }) => {
  console.log('Button rendered');
  return <button onClick={onClick}>Click me</button>;
});

const App = () => {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={handleClick} />
    </div>
  );
};

export default App;

6. useMemo Hook
Example: Memoized Value

import React, { useState, useMemo } from 'react';

const ExpensiveCalculation = ({ count }) => {
  const calculatedValue = useMemo(() => {
    console.log('Calculating...');
    return count * 2;
  }, [count]);

  return <div>Calculated Value: {calculatedValue}</div>;
};

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ExpensiveCalculation count={count} />
    </div>
  );
};

export default App;

7. useRef Hook
Example: Focus Input

import React, { useRef } from 'react';

const FocusInput = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default FocusInput;

8. useLayoutEffect Hook
Example: Measure DOM Element

import React, { useState, useLayoutEffect, useRef } from 'react';

const MeasureComponent = () => {
  const [width, setWidth] = useState(0);
  const divRef = useRef(null);

  useLayoutEffect(() => {
    setWidth(divRef.current.offsetWidth);
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '50%' }}>Measured Div</div>
      <p>Width: {width}px</p>
    </div>
  );
};

export default MeasureComponent;

9. useImperativeHandle Hook
Example: Custom Input with Forwarded Ref

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} type="text" />;
});

const App = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default App;

10. useDebugValue Hook
Example: Custom Hook with Debug Value

import React, { useState, useEffect, useDebugValue } from 'react';

const useCount = (initialValue) => {
  const [count, setCount] = useState(initialValue);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  useDebugValue(count > 5 ? 'High' : 'Low');

  return count;
};

const App = () => {
  const count = useCount(0);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

Palindrome Number in Javascript

nikhilkalariya — Sun, 21 Jul 2024 10:47:07 +0000

Method 1: String Conversion and Reversal

function isPalindrome(number) {
    const str = number.toString();
    const reversedStr = str.split('').reverse().join('');
    return str === reversedStr;
}

// Example usage
console.log(isPalindrome(121)); // true
console.log(isPalindrome(123)); // false
console.log(isPalindrome(1331)); // true

Method 2: Using a Loop


function isPalindrome(number) {
    const str = number.toString();
    const len = str.length;

    for (let i = 0; i < len / 2; i++) {
        if (str[i] !== str[len - 1 - i]) {
            return false;
        }
    }
    return true;
}

// Example usage
console.log(isPalindrome(121)); // true
console.log(isPalindrome(123)); // false
console.log(isPalindrome(1331)); // true

Method 3: Mathematical Approach
This approach avoids string conversion and operates directly on the number.


function isPalindrome(number) {
    if (number < 0) return false; // Negative numbers are not palindromes
    let reversed = 0;
    let original = number;

    while (original > 0) {
        const digit = original % 10;
        reversed = reversed * 10 + digit;
        original = Math.floor(original / 10);
    }

    return number === reversed;
}

// Example usage
console.log(isPalindrome(121)); // true
console.log(isPalindrome(123)); // false
console.log(isPalindrome(1331)); // true

Method 4: Using Recursion

function isPalindromeHelper(str, start, end) {
    if (start >= end) return true;
    if (str[start] !== str[end]) return false;
    return isPalindromeHelper(str, start + 1, end - 1);
}

function isPalindrome(number) {
    const str = number.toString();
    return isPalindromeHelper(str, 0, str.length - 1);
}

// Example usage
console.log(isPalindrome(121)); // true
console.log(isPalindrome(123)); // false
console.log(isPalindrome(1331)); // true

Method 5: Using Regular Expressions

function isPalindrome(number) {
    const str = number.toString();
    const reversedStr = str.replace(/[\W_]/g, '').split('').reverse().join('');
    return str === reversedStr;
}

// Example usage
console.log(isPalindrome(121)); // true
console.log(isPalindrome(123)); // false
console.log(isPalindrome(1331)); // true

JavaScript Array Coding question

nikhilkalariya — Sat, 20 Jul 2024 06:41:01 +0000

Finding the Missing Number in an Array from 1 to 100:

function findMissingNumber(nums) {
    const n = 100;
    const expectedSum = (n * (n + 1)) / 2;
    const actualSum = nums.reduce((acc, num) => acc + num, 0);
    return expectedSum - actualSum;
}

console.log(findMissingNumber([...Array(100).keys()].map(n => n + 1).filter(n => n !== 50))); // Example where 50 is missing

Finding the Duplicate Number in an Array:


function findDuplicate(nums) {
    const seen = new Set();
    for (const num of nums) {
        if (seen.has(num)) {
            return num;
        }
        seen.add(num);
    }
    return -1; // If no duplicate found
}

console.log(findDuplicate([1, 2, 3, 4, 4])); // Example with duplicate 4

Finding the Largest and Smallest Number in an Unsorted Array:

function findMinMax(nums) {
    let min = nums[0];
    let max = nums[0];
    for (const num of nums) {
        if (num < min) min = num;
        if (num > max) max = num;
    }
    return { min, max };
}

console.log(findMinMax([3, 5, 1, 2, 4])); // Example output: { min: 1, max: 5 }

Finding All Pairs of an Integer Array Whose Sum Equals a Given Number:

function findPairsWithSum(nums, target) {
    const pairs = [];
    const seen = new Set();
    for (const num of nums) {
        const complement = target - num;
        if (seen.has(complement)) {
            pairs.push([complement, num]);
        }
        seen.add(num);
    }
    return pairs;
}

console.log(findPairsWithSum([1, 2, 3, 4, 3], 6)); // Example output: [[3, 3], [2, 4]]

Finding Duplicate Numbers in an Array if It Contains Multiple Duplicates:

function findDuplicates(nums) {
    const seen = new Set();
    const duplicates = new Set();
    for (const num of nums) {
        if (seen.has(num)) {
            duplicates.add(num);
        }
        seen.add(num);
    }
    return Array.from(duplicates);
}

console.log(findDuplicates([1, 2, 3, 4, 3, 2])); // Example output: [2, 3]

Finding the Starting and Ending Position of a Given Value in a Sorted Array:



function searchRotatedArray(nums, target) {
    let left = 0, right = nums.length - 1;
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (nums[mid] === target) return mid;
        if (nums[left] <= nums[mid]) {
            if (nums[left] <= target && target < nums[mid]) {
                right = mid - 1;
            } else {
                left = mid + 1;
            }
        } else {
            if (nums[mid] < target && target <= nums[right]) {
                left = mid + 1;
            } else {
                right = mid - 1;
            }
        }
    }
    return -1;
}

console.log(searchRotatedArray([4, 5, 6, 7, 0, 1, 2], 0)); // Example output: 4

Finding the Length of the Longest Consecutive Elements Sequence in an Unsorted Array:

function longestConsecutive(nums) {
    const numSet = new Set(nums);
    let longestStreak = 0;
    for (const num of nums) {
        if (!numSet.has(num - 1)) {
            let currentNum = num;
            let currentStreak = 1;
            while (numSet.has(currentNum + 1)) {
                currentNum += 1;
                currentStreak += 1;
            }
            longestStreak = Math.max(longestStreak, currentStreak);
        }
    }
    return longestStreak;
}

console.log(longestConsecutive([100, 4, 200, 1, 3, 2])); // Example output: 4

Sorting an Integer Array In-Place Using the Quicksort Algorithm:


// javascript
function quicksort(arr, left = 0, right = arr.length - 1) {
    if (left >= right) return;
    const pivot = arr[Math.floor((left + right) / 2)];
    const index = partition(arr, left, right, pivot);
    quicksort(arr, left, index - 1);
    quicksort(arr, index, right);
}

function partition(arr, left, right, pivot) {
    while (left <= right) {
        while (arr[left] < pivot) left++;
        while (arr[right] > pivot) right--;
        if (left <= right) {
            [arr[left], arr[right]] = [arr[right], arr[left]];
            left++;
            right--;
        }
    }
    return left;
}

const arr = [3, 6, 8, 10, 1, 2, 1];
quicksort(arr);
console.log(arr); // Example output: [1, 1, 2, 3, 6, 8, 10]

*Removing Duplicates from an Array In-Place:
*


// javascript
function removeDuplicates(nums) {
    let index = 1;
    for (let i = 1; i < nums.length; i++) {
        if (nums[i] !== nums[i - 1]) {
            nums[index] = nums[i];
            index++;
        }
    }
    return nums.slice(0, index);
}

console.log(removeDuplicates([1, 1, 2, 2, 3, 4, 4])); // Example output: [1, 2, 3, 4]

Reversing an Array In-Place in Java:



function reverseArray(arr) {
    let left = 0;
    let right = arr.length - 1;
    while (left < right) {
        const temp = arr[left];
        arr[left] = arr[right];
        arr[right] = temp;
        left++;
        right--;
    }
}

const arr = [1, 2, 3, 4, 5];
reverseArray(arr);
console.log(arr); // Example output: [5, 4, 3, 2, 1]

Removing Duplicates from an Array Without Using Any Library:

function removeDuplicates(arr) {
    const uniqueElements = [];
    for (let i = 0; i < arr.length; i++) {
        if (!uniqueElements.includes(arr[i])) {
            uniqueElements.push(arr[i]);
        }
    }
    return uniqueElements;
}

const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = removeDuplicates(arrayWithDuplicates);
console.log(uniqueArray); // Example output: [1, 2, 3, 4, 5]

Removing Duplicates from an Array Without Using Any Library second:

function removeDuplicates(arr) {
    const unique = [];
    for (const num of arr) {
        if (!unique.includes(num)) {
            unique.push(num);
        }
    }
    return unique;
}

console.log(removeDuplicates([1, 2, 2, 3, 4, 4, 5])); // Example output: [1, 2, 3, 4, 5]

Converting a Byte Array to String:

// javascript
function byteArrayToString(bytes) {
    return String.fromCharCode(...bytes);
}

console.log(byteArrayToString([104, 101, 108, 108, 111])); // Example output: "hello"

Difference Between an Array and a Linked List:



// text
// Arrays:
// - Fixed size (in many languages).
// - Contiguous memory allocation.
// - O(1) access time for elements via index.
// - O(n) time complexity for insertion and deletion (in the worst case).

// Linked Lists:
// - Dynamic size.
// - Non-contiguous memory allocation.
// - O(n) access time for elements (sequential access).
// - O(1) time complexity for insertion and deletion at the beginning or end.

Binary Search in a Given Array:


// javascript
function binarySearch(arr, target) {
    let left = 0, right = arr.length - 1;
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (arr[mid] === target) return mid;
        if (arr[mid] < target) left = mid + 1;
        else right = mid - 1;
    }
    return -1; // If the target is not found
}

console.log(binarySearch([1, 2, 3, 4, 5, 6], 4)); // Example output: 3

Finding the Median of Two Sorted Arrays:

function findMedianSortedArrays(nums1, nums2) {
    const merged = mergeSortedArrays(nums1, nums2);
    const n = merged.length;
    if (n % 2 === 0) {
        return (merged[Math.floor((n - 1) / 2)] + merged[Math.floor(n / 2)]) / 2;
    } else {
        return merged[Math.floor(n / 2)];
    }
}

function mergeSortedArrays(arr1, arr2) {
    const merged = [];
    let i = 0, j = 0;
    while (i < arr1.length && j < arr2.length) {
        if (arr1[i] < arr2[j]) {
            merged.push(arr1[i]);
            i++;
        } else {
            merged.push(arr2[j]);
            j++;
        }
    }
    while (i < arr1.length) merged.push(arr1[i++]);
    while (j < arr2.length) merged.push(arr2[j++]);
    return merged;
}

console.log(findMedianSortedArrays([1, 3], [2])); // Example output: 2
console.log(findMedianSortedArrays([1, 2], [3, 4])); // Example output: 2.5

** Rotating an Array Left and Right by a Given Number K:**

function rotateArrayLeft(arr, k) {
    k = k % arr.length;
    return arr.slice(k).concat(arr.slice(0, k));
}

function rotateArrayRight(arr, k) {
    k = k % arr.length;
    return arr.slice(-k).concat(arr.slice(0, -k));
}

console.log(rotateArrayLeft([1, 2, 3, 4, 5], 2)); // Example output: [3, 4, 5, 1, 2]
console.log(rotateArrayRight([1, 2, 3, 4, 5], 2)); // Example output: [4, 5, 1, 2, 3]

Finding Duplicates from an Unsorted Array:



function findDuplicates(nums) {
    const seen = new Set();
    const duplicates = new Set();
    for (const num of nums) {
        if (seen.has(num)) {
            duplicates.add(num);
        } else {
            seen.add(num);
        }
    }
    return Array.from(duplicates);
}

console.log(findDuplicates([1, 2, 3, 4, 3, 2, 1])); // Example output: [1, 2, 3]

Finding the Starting and Ending Position of a Given Value in a Sorted Array:


function searchRange(nums, target) {
    const result = [-1, -1];
    result[0] = findBound(nums, target, true);
    if (result[0] !== -1) {
        result[1] = findBound(nums, target, false);
    }
    return result;
}

function findBound(nums, target, isFirst) {
    let left = 0, right = nums.length - 1;
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (nums[mid] === target) {
            if (isFirst) {
                if (mid === left || nums[mid - 1] !== target) {
                    return mid;
                }
                right = mid - 1;
            } else {
                if (mid === right || nums[mid + 1] !== target) {
                    return mid;
                }
                left = mid + 1;
            }
        } else if (nums[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }
    return -1;
}

console.log(searchRange([5, 7, 7, 8, 8, 10], 8)); // Example output: [3, 4]

Finding the Contiguous Subarray with the Largest Sum:

function maxSubArray(nums) {
let maxSoFar = nums[0];
let maxEndingHere = nums[0];
for (let i = 1; i < nums.length; i++) {
maxEndingHere = Math.max(nums[i], maxEndingHere + nums[i]);
maxSoFar = Math.max(maxSoFar, maxEndingHere);
}
return maxSoFar;
}

console.log(maxSubArray([-2, 1, -3, 4, -1, 2, 1, -5, 4])); // Example output: 6

JavaScript Array Coding question

nikhilkalariya — Thu, 27 Jun 2024 10:04:29 +0000

Finding the Missing Number in an Array from 1 to 100:

function findMissingNumber(nums) {
    const n = 100;
    const expectedSum = (n * (n + 1)) / 2;
    const actualSum = nums.reduce((acc, num) => acc + num, 0);
    return expectedSum - actualSum;
}

console.log(findMissingNumber([...Array(100).keys()].map(n => n + 1).filter(n => n !== 50))); // Example where 50 is missing

Finding the Duplicate Number in an Array:


function findDuplicate(nums) {
    const seen = new Set();
    for (const num of nums) {
        if (seen.has(num)) {
            return num;
        }
        seen.add(num);
    }
    return -1; // If no duplicate found
}

console.log(findDuplicate([1, 2, 3, 4, 4])); // Example with duplicate 4

Finding the Largest and Smallest Number in an Unsorted Array:

function findMinMax(nums) {
    let min = nums[0];
    let max = nums[0];
    for (const num of nums) {
        if (num < min) min = num;
        if (num > max) max = num;
    }
    return { min, max };
}

console.log(findMinMax([3, 5, 1, 2, 4])); // Example output: { min: 1, max: 5 }

Finding All Pairs of an Integer Array Whose Sum Equals a Given Number:

function findPairsWithSum(nums, target) {
    const pairs = [];
    const seen = new Set();
    for (const num of nums) {
        const complement = target - num;
        if (seen.has(complement)) {
            pairs.push([complement, num]);
        }
        seen.add(num);
    }
    return pairs;
}

console.log(findPairsWithSum([1, 2, 3, 4, 3], 6)); // Example output: [[3, 3], [2, 4]]

Finding Duplicate Numbers in an Array if It Contains Multiple Duplicates:

function findDuplicates(nums) {
    const seen = new Set();
    const duplicates = new Set();
    for (const num of nums) {
        if (seen.has(num)) {
            duplicates.add(num);
        }
        seen.add(num);
    }
    return Array.from(duplicates);
}

console.log(findDuplicates([1, 2, 3, 4, 3, 2])); // Example output: [2, 3]

Finding the Starting and Ending Position of a Given Value in a Sorted Array:



function searchRotatedArray(nums, target) {
    let left = 0, right = nums.length - 1;
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (nums[mid] === target) return mid;
        if (nums[left] <= nums[mid]) {
            if (nums[left] <= target && target < nums[mid]) {
                right = mid - 1;
            } else {
                left = mid + 1;
            }
        } else {
            if (nums[mid] < target && target <= nums[right]) {
                left = mid + 1;
            } else {
                right = mid - 1;
            }
        }
    }
    return -1;
}

console.log(searchRotatedArray([4, 5, 6, 7, 0, 1, 2], 0)); // Example output: 4

Finding the Length of the Longest Consecutive Elements Sequence in an Unsorted Array:

function longestConsecutive(nums) {
    const numSet = new Set(nums);
    let longestStreak = 0;
    for (const num of nums) {
        if (!numSet.has(num - 1)) {
            let currentNum = num;
            let currentStreak = 1;
            while (numSet.has(currentNum + 1)) {
                currentNum += 1;
                currentStreak += 1;
            }
            longestStreak = Math.max(longestStreak, currentStreak);
        }
    }
    return longestStreak;
}

console.log(longestConsecutive([100, 4, 200, 1, 3, 2])); // Example output: 4

Sorting an Integer Array In-Place Using the Quicksort Algorithm:


function quicksort(arr, left = 0, right = arr.length - 1) {
    if (left >= right) return;
    const pivot = arr[Math.floor((left + right) / 2)];
    const index = partition(arr, left, right, pivot);
    quicksort(arr, left, index - 1);
    quicksort(arr, index, right);
}

function partition(arr, left, right, pivot) {
    while (left <= right) {
        while (arr[left] < pivot) left++;
        while (arr[right] > pivot) right--;
        if (left <= right) {
            [arr[left], arr[right]] = [arr[right], arr[left]];
            left++;
            right--;
        }
    }
    return left;
}

const arr = [3, 6, 8, 10, 1, 2, 1];
quicksort(arr);
console.log(arr); // Example output: [1, 1, 2, 3, 6, 8, 10]

Reversing an Array In-Place in Java:


function reverseArray(arr) {
    let left = 0;
    let right = arr.length - 1;
    while (left < right) {
        const temp = arr[left];
        arr[left] = arr[right];
        arr[right] = temp;
        left++;
        right--;
    }
}

const arr = [1, 2, 3, 4, 5];
reverseArray(arr);
console.log(arr); // Example output: [5, 4, 3, 2, 1]

Converting a Byte Array to String:


function byteArrayToString(bytes) {
    return String.fromCharCode(...bytes);
}

console.log(byteArrayToString([104, 101, 108, 108, 111])); // Example output: "hello"

*Difference Between an Array and a Linked List:

// text
// Arrays:
// - Fixed size (in many languages).
// - Contiguous memory allocation.
// - O(1) access time for elements via index.
// - O(n) time complexity for insertion and deletion (in the worst case).

// Linked Lists:
// - Dynamic size.
// - Non-contiguous memory allocation.
// - O(n) access time for elements (sequential access).
// - O(1) time complexity for insertion and deletion at the beginning or end.
Binary Search in a Given Array:

function binarySearch(arr, target) {
    let left = 0, right = arr.length - 1;
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (arr[mid] === target) return mid;
        if (arr[mid] < target) left = mid + 1;
        else right = mid - 1;
    }
    return -1; // If the target is not found
}

console.log(binarySearch([1, 2, 3, 4, 5, 6], 4)); 
// Example output: 3

Finding the Median of Two Sorted Arrays:

function findMedianSortedArrays(nums1, nums2) {
    const merged = mergeSortedArrays(nums1, nums2);
    const n = merged.length;
    if (n % 2 === 0) {
        return (merged[Math.floor((n - 1) / 2)] + merged[Math.floor(n / 2)]) / 2;
    } else {
        return merged[Math.floor(n / 2)];
    }
}

function mergeSortedArrays(arr1, arr2) {
    const merged = [];
    let i = 0, j = 0;
    while (i < arr1.length && j < arr2.length) {
        if (arr1[i] < arr2[j]) {
            merged.push(arr1[i]);
            i++;
        } else {
            merged.push(arr2[j]);
            j++;
        }
    }
    while (i < arr1.length) merged.push(arr1[i++]);
    while (j < arr2.length) merged.push(arr2[j++]);
    return merged;
}

console.log(findMedianSortedArrays([1, 3], [2])); // Example output: 2
console.log(findMedianSortedArrays([1, 2], [3, 4])); // Example output: 2.5

** Rotating an Array Left and Right by a Given Number K:**

function rotateArrayLeft(arr, k) {
    k = k % arr.length;
    return arr.slice(k).concat(arr.slice(0, k));
}

function rotateArrayRight(arr, k) {
    k = k % arr.length;
    return arr.slice(-k).concat(arr.slice(0, -k));
}

console.log(rotateArrayLeft([1, 2, 3, 4, 5], 2)); // Example output: [3, 4, 5, 1, 2]
console.log(rotateArrayRight([1, 2, 3, 4, 5], 2)); // Example output: [4, 5, 1, 2, 3]

Finding Duplicates from an Unsorted Array:



function findDuplicates(nums) {
    const seen = new Set();
    const duplicates = new Set();
    for (const num of nums) {
        if (seen.has(num)) {
            duplicates.add(num);
        } else {
            seen.add(num);
        }
    }
    return Array.from(duplicates);
}

console.log(findDuplicates([1, 2, 3, 4, 3, 2, 1])); // Example output: [1, 2, 3]

Finding the Starting and Ending Position of a Given Value in a Sorted Array:


function searchRange(nums, target) {
    const result = [-1, -1];
    result[0] = findBound(nums, target, true);
    if (result[0] !== -1) {
        result[1] = findBound(nums, target, false);
    }
    return result;
}

function findBound(nums, target, isFirst) {
    let left = 0, right = nums.length - 1;
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (nums[mid] === target) {
            if (isFirst) {
                if (mid === left || nums[mid - 1] !== target) {
                    return mid;
                }
                right = mid - 1;
            } else {
                if (mid === right || nums[mid + 1] !== target) {
                    return mid;
                }
                left = mid + 1;
            }
        } else if (nums[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }
    return -1;
}

console.log(searchRange([5, 7, 7, 8, 8, 10], 8)); // Example output: [3, 4]

Finding the Contiguous Subarray with the Largest Sum:

function maxSubArray(nums) {
    let maxSoFar = nums[0];
    let maxEndingHere = nums[0];
    for (let i = 1; i < nums.length; i++) {
        maxEndingHere = Math.max(nums[i], maxEndingHere + nums[i]);
        maxSoFar = Math.max(maxSoFar, maxEndingHere);
    }
    return maxSoFar;
}

console.log(maxSubArray([-2, 1, -3, 4, -1, 2, 1, -5, 4])); // Example output: 6

Duplicate Number

nikhilkalariya — Thu, 27 Jun 2024 10:04:23 +0000

Find duplicate number with filter

const array = [1, 2, 3, 2, 4, 5, 4, 5];
const duplicates1 = array.filter((item, index) => array.indexOf(item) !== index);

console.log(duplicates1); // Output: [2, 4, 5]

Find duplicate number with Nested For In Loop

const array = [1, 2, 3, 2, 4, 5, 4, 5];
let duplicates = [];

for (let i in array) {
    for (let j in array) {
        if (array[i] === array[j] && i !== j) {
            // Check if the found duplicate is already in the duplicates array
            if (!duplicates.includes(array[i])) {
                duplicates.push(array[i]);
                break; // To avoid adding the same duplicate multiple times
            }
        }
    }
}

console.log(duplicates);

Find duplicate number with Foreach

let arr = [1, 2, 3, 4, 5, 2, 6, 3, 7, 8, 8];
let duplicates = [];

arr.forEach(function (value, index, array) {
    if (array.indexOf(value, index + 1) !== -1
        && duplicates.indexOf(value) === -1) {
        duplicates.push(value);
    }
});
console.log(duplicate)

Find duplicate number Using Set() object and has() Method

const array = [1, 2, 3, 2, 4, 5, 4, 5];
const uniqueElements = new Set();
const duplicates = [];

array.forEach(item => {
  if (uniqueElements.has(item)) {
    duplicates.push(item);
  } else {
    uniqueElements.add(item);
  }
});

console.log(duplicates); // Output: [2, 4, 5]

Removing Duplicates from an Array In-Place:

function removeDuplicates(nums) {
    let index = 1;
    for (let i = 1; i < nums.length; i++) {
        if (nums[i] !== nums[i - 1]) {
            nums[index] = nums[i];
            index++;
        }
    }
    return nums.slice(0, index);
}

console.log(removeDuplicates([1, 1, 2, 2, 3, 4, 4])); // Example output: [1, 2, 3, 4]

Removing Duplicates from an Array Without Using Any Library:

function removeDuplicates(arr) {
    const uniqueElements = [];
    for (let i = 0; i < arr.length; i++) {
        if (!uniqueElements.includes(arr[i])) {
            uniqueElements.push(arr[i]);
        }
    }
    return uniqueElements;
}

const arrayWithDuplicates = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = removeDuplicates(arrayWithDuplicates);
console.log(uniqueArray); // Example output: [1, 2, 3, 4, 5]

Removing Duplicates from an Array Without Using Any Library second:

function removeDuplicates(arr) {
    const unique = [];
    for (const num of arr) {
        if (!unique.includes(num)) {
            unique.push(num);
        }
    }
    return unique;
}

console.log(removeDuplicates([1, 2, 2, 3, 4, 4, 5])); // Example output: [1, 2, 3, 4, 5]

Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct.

Example 1:

Input: nums = [1,2,3,1]
Output: true
Input: nums = [2,3,1]
Output: false

function containsDuplicate(nums) {
    const uniqueElements = new Set();

    for (let num of nums) {
        if (uniqueElements.has(num)) {
            return true;
        }
        uniqueElements.add(num);
    }

    return false;
}
const arr = [1, 2, 1, 4, 3, 4, 5, 6];
console.log(containsDuplicate(arr));

Missing Number

nikhilkalariya — Thu, 27 Jun 2024 09:18:41 +0000

with using sort method to solve

const numbers = [1, 2, 3, 4, 5, 6, 8, 9, 10];
function findMissingNumber(arr) {
    arr.sort((a, b) => a - b);
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] !== i + 1) {
            return i + 1;
        }
    }
    return arr.length + 1;
}


const missingNumber = findMissingNumber(numbers);
console.log("The missing number is:", missingNumber);

Missing number using for loop

function test(nums) {
  for (let n = 1; n<= nums.length + 1; n++) {
    if (nums.indexOf(n) === -1) 
      return n;
  }
}

nums = [1,3,5,6,7]
console.log("nums = "+nums)
console.log("Missing number of the said array: "+test(nums));

Without using any built in method

//third way to find missng number
const arr1 = [1, 2, 3, 5];
const N = arr1.length;
function getMissingNo(arr1, n) {
    // The range is [1, N]
    const N = n + 1;
    // Calculate the sum of the range
    const totalSum = (N * (N + 1)) / 2;

    // Sum of elements in the array
    let arraySum = 0;
    for (let i = 0; i < n; i++) {
        arraySum += arr1[i];
    }

    // The missing number
    return totalSum - arraySum;
}

// Driver code

console.log(getMissingNo(arr1, N));

With using reduce method to solve

const arr = [1, 2, 4, 5, 6];
//second way find missing job
function findMissingNumber(arr) {
  // Calculate the length of the array + 1 (since one number is missing)
  const n = arr.length + 1;

  // Calculate the expected sum of numbers from 1 to n
  const expectedSum = (n * (n + 1)) / 2;

  // Calculate the sum of numbers in the given array
  const actualSum = arr.reduce((acc, num) => acc + num, 0);

  // The difference between expectedSum and actualSum is the missing number
  const missingNumber = expectedSum - actualSum;

  console.log("The missing number is:", missingNumber);
  return missingNumber;
}

// Example usage

findMissingNumber(arr);  // Output will be: The missing number is: 3

Find all missing first to last element between

const arr1 = [1, 3, 5, 7];

// Find the minimum and maximum values in the array
const min = Math.min(...arr1);
const max = Math.max(...arr1);

// Initialize an array to hold the missing numbers
const missingNumbers = [];

// Loop through the range from min to max
for (let i = min; i <= max; i++) {
  // If the current number is not in the array, add it to the missing numbers
  if (!arr1.includes(i)) {
    missingNumbers.push(i);
  }
}

console.log(missingNumbers);

React interview questions

nikhilkalariya — Tue, 19 Mar 2024 09:50:45 +0000

1. What is React?

React is an open-source front-end JavaScript library that is used for building composable user interfaces, especially for single-page applications. It is used for handling view layer for web and mobile apps based on components in a declarative approach.

React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed in 2011 and on Instagram in 2012

2. How is React different from Angular or Vue?
When comparing React, Angular, and Vue.js, a few key differentiators stand out.

Core Philosophy

React: Focuses on UI components. You need other libraries for state management, routing, etc.
Angular: Provides a more comprehensive solution out of the box, often called "batteries included."
Vue.js: A good balance of providing core libraries and flexibility for integration with third-party tools.

Learning Curve

React: Initially simpler to learn due to its focused nature, but can become complex as you add more external libraries.
Angular: Steeper learning curve because of its complete ecosystem, including modules, services, and complex directives.
Vue.js: Known for its gentle learning curve and clear, concise documentation.

Community and Ecosystem

React: Enjoys an enormous community, and users can pick and choose from a vast array of third-party libraries to complement its core features.
Angular: Boasts a comprehensive ecosystem that's well-managed by its developers and is known for its enterprise support.
Vue.js: While the newest of these frameworks, it has been growing rapidly, with a dedicated team and a flourishing community.

Performance

React: Focuses on efficient rendering and offers built-in tools for performance optimization.
Angular: Optimizes performance through features like Ahead-Of-Time (AOT) compilation and Zone.js, which prevents unnecessary digest cycles.
Vue.js: Also optimized for performance, with a small bundle size and features like lazy-loading components.

3. How do you create a component in React?

Creating a React component involves defining its structure, behavior, and sometimes lifecycle methods for dynamic updates. Components can be functional or class-based.

Code Example

`Here's a Class-based component:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
And here's a Functional one:

import React from 'react';`

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

Both examples showcase a basic greeting component that takes in a prop name and displays a greeting message.

Linters and JSX
Many modern text editors and IDEs support JSX and JavaScript syntax, especially when integrated with linters like ESLint. This setup provides real-time feedback on errors and formatting issues.

Code Styling with AirBNB and Prettier
It's common to see code bases following the Airbnb style guide, often coupled with Prettier for consistent and automated code formatting.

In the context of component creation, these standards can dictate whether to use single or double quotes for JSX attributes and the method for defining components.

Key Takeaways
JSX offers a natural, HTML-like syntax for building components in React.
Components can be function-based or class-based.
Use modern editing tools and linters for improved code consistency and spotting potential issues in real-time.

4. Functional vs Class-Based Components

Here is the React code:
// Functional Component with useState hook
import React, { useState } from 'react';

export default function Button() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}


// Class-based Component


import React, { Component } from 'react';

export default class Button extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Clicked {this.state.count} times
      </button>
    );
  }
}

5. Can you explain the virtual DOM in React?

The Virtual DOM is a key concept in React, responsible for its high performance. It efficiently manages the DOM setup, minimizes updates, and then syncs them to the actual DOM tree.

How the Virtual DOM Works

Initial Rendering: When the application starts, React creates a simplified in-memory representation of the DOM, called the Virtual DOM.

Tree Comparison: During each state change, React builds a new Virtual DOM representation. It then compares this updated representation against the previous one to identify what has changed. This process is often called "reconciliation".

Selective Rendering: React determines the most minimal set of changes needed to keep the Virtual DOM in sync with the actual DOM. This approach, known as "reconciliation", is a performance booster as it reduces unnecessary updates.

Batched Updates: React performs the actual DOM updates in a batch, typically during the next animation frame or when no more updates are being made. This batching leads to optimized DOM operations, further enhancing performance.

One-Way Sync: After the in-memory Virtual DOM and the actual DOM have been reconciled and the necessary updates identified, React syncs these changes in a one-way process, from the Virtual DOM to the actual DOM. This approach helps prevent unnecessary visual glitches and performance hits.

Asynchronous Handling: React schedules state changes, ensuring performance by bundling multiple changes that can be processed together. This aids in avoiding unnecessary Virtual DOM updates and ensures efficient tree comparisons.

Preventing Direct DOM Manipulation: React applications typically avoid manual DOM manipulation. Instead, all changes are made through React, which then uses its Virtual DOM mechanism to batch and apply these changes to the actual DOM.

Support for Cross-Platform Environments: The Virtual DOM gives sturdy cross-platform capabilities, enabling consistent and optimized performance irrespective of the underlying operating system or hardware.

6. What are props and state in React? Explain React state and props

The props in React are the inputs to a component of React. They can be single-valued or objects having a set of values that will be passed to components of React during creation by using a naming convention that almost looks similar to HTML-tag attributes. We can say that props are the data passed from a parent component into a child component.

The main purpose of props is to provide different component functionalities such as:

Passing custom data to the React component.
Using through this.props.reactProp inside render() method of the component.
Triggering state changes.
For example, consider we are creating an element with reactProp property as given below:
This reactProp name will be considered as a property attached to the native props object of React which already exists on each component created with the help of React library: props.reactProp;.

Props

Immutable
Has better performance
Can be passed to child components

State

Owned by its component
Locally scoped
Writeable/Mutable
has setState() method to modify properties
Changes to state can be asynchronous
can only be passed as props

How to declare a state object?

Example:

class Car extends React.Component{
constructor(props){
  super(props);
  this.state = {
    brand: "BMW",
    color: "black"
  }
}
}

How to use and update the state object?


class Car extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    brand: "BMW",
    color: "Black"
  };
}
changeColor() {
  this.setState(prevState => {
    return { color: "Red" };
  });
}
render() {
  return (
    <div>
      <button onClick={() => this.changeColor()}>Change Color</button>
      <p>{this.state.color}</p>
    </div>
  );
}
}

As one can see in the code above, we can use the state by calling this.state.propertyName and we can change the state object property using setState method.

React Props

Every React component accepts a single object argument called props (which stands for “properties”). These props can be passed to a component using HTML attributes and the component accepts these props as an argument.

Using props, we can pass data from one component to another.

Passing props to a component:

While rendering a component, we can pass the props as an HTML attribute:

<Car brand="Mercedes"/>
The component receives the props:

In Class component:

class Car extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    brand: this.props.brand,
    color: "Black"
  };
}
}
In Functional component:

function Car(props) {
let [brand, setBrand] = useState(props.brand);
}

What Is ‘State’ in ReactJS?

The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. The change in state can happen as a response to user action or system-generated events and these changes determine the behavior of the component and how it will render.

React State

A state can be modified based on user action or network changes
Every time the state of an object changes, React re-renders the component to the browser

The state object is initialized in the constructor
The state object can store multiple properties
this.setState() is used to change the value of the state object
setState() function performs a shallow merge between the new and the previous state

The setState() Method
State can be updated in response to event handlers, server responses, or prop changes. This is done using the setState() method. The setState() method enqueues all of the updates made to the component state and instructs React to re-render the component and its children with the updated state.

Always use the setState() method to change the state object, since it will ensure that the component knows it’s been updated and calls the render() method

class Greetings extends React.Component {
  state = {
    name: "World"
  };

  updateName() {
    this.setState({ name: "Simplilearn" });
  }

  render() {
      return(
          <div>
              {this.state.name}
          </div>
      )
  }
}

7. Explain the lifecycle methods of components

A React Component can go through four stages of its life as follows.

Initialization: This is the stage where the component is constructed with the given Props and default state. This is done in the constructor of a Component Class.

Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.

Updating: Updating is the stage when the state of a component is updated and the application is repainted.

Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

8. What is prop drilling in React?

Sometimes while developing React applications, there is a need to pass data from a component that is higher in the hierarchy to a component that is deeply nested. To pass data between such components, we pass props from a source component and keep passing the prop to the next component in the hierarchy till we reach the deeply nested component.

The disadvantage of using prop drilling is that the components that should otherwise be not aware of the data have access to the data

9. How do you handle events in React?

React simplifies the process of managing and handling events through its use of synthetic events.

Handling Events in React
Synthetic Events
React abstracts browser events into what are known as synthetic events. This ensures a consistent interface across different browsers.

Event Subscription
When handling events, React behaves consistently across all elements, not just form elements.

React events use camelCase, unlike HTML, which is helpful for both consistency and avoiding reserved words in JavaScript.

Use boolean attributes in JSX for default browser events.

Special Event Handling
React provides special interfaces for certain types of events: input components benefit from the value attribute, while media components make use of src or other similar attributes specific to their type.

Code Example: Event Handling
Here is the JavaScript code:

import React from 'react';

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

10. What is React Hooks? Explain React Hooks.

React Hooks are the built-in functions that permit developers for using the state and lifecycle methods within React components. These are newly added features made available in React 16.8 version. Each lifecycle of a component is having 3 phases which include mount, unmount, and update. Along with that, components have properties and states. Hooks will allow using these methods by developers for improving the reuse of code with higher flexibility navigating the component tree.

Using Hook, all features of React can be used without writing class components. For example, before React version 16.8, it required a class component for managing the state of a component. But now using the useState hook, we can keep the state in a functional component.

What are Hooks? Hooks are functions that let us “hook into” React state and lifecycle features from a functional component.

React Hooks cannot be used in class components. They let us write components without class.

Why were Hooks introduced in React?

React hooks were introduced in the 16.8 version of React. Previously, functional components were called stateless components. Only class components were used for state management and lifecycle methods. The need to change a functional component to a class component, whenever state management or lifecycle methods were to be used, led to the development of Hooks.

Example of a hook: useState hook:

In functional components, the useState hook lets us define a state for a component:

function Person(props) {
// We are declaring a state variable called name.
// setName is a function to update/change the value of name
let [name, setName] = useState('');
}

The state variable “name” can be directly used inside the HTML.