Hackforge Academy

Explanation

Question: What is the difference between useState and useRef in React? Answer: useState triggers a component re-render when its value changes. useRef stores mutable values that persist across renders without causing a re-render.

Code:

import { useState, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(0);

  renderCount.current++;

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

Explanation

Question: How can React.memo improve performance? Answer: React.memo prevents unnecessary re-renders of a component when its props have not changed.

Code:

const UserCard = React.memo(({ name }) => {
  console.log('Rendering UserCard');
  return <h3>{name}</h3>;
});

Explanation

Question: What is a Closure in JavaScript? Answer: A closure allows an inner function to access variables from its outer function even after the outer function has finished executing.

Code:

function counter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

Explanation

Question: What is the difference between var, let, and const? Answer: var is function-scoped and can be redeclared. let is block-scoped and can be reassigned. const is block-scoped and cannot be reassigned after initialization.

Code:

var a = 10;
let b = 20;
const c = 30;

b = 25; // Allowed
// c = 35; // Error

Explanation

Question: How do you implement Debouncing in JavaScript? Answer: Debouncing delays function execution until a specified time has passed since the last event, reducing unnecessary API calls and computations.

Code:

function debounce(fn, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const search = debounce(() => {
  console.log('API Call');
}, 500);