React Questions

What is React?

React is a JavaScript library for building user interfaces, especially single-page applications where data changes over time without reloading the page.

What are the major features of React?

JSX – JavaScript syntax extension Components – Encapsulated reusable code Virtual DOM – Efficient rendering One-way Data Binding Hooks – Functional component enhancements

• JSX – JavaScript syntax extension
• Components – Encapsulated reusable code
• Virtual DOM – Efficient rendering
• One-way Data Binding
• Hooks – Functional component enhancements

What is JSX?

JSX stands for JavaScript XML. It allows you to write HTML inside JavaScript: JSX gets transpiled to React.createElement() behind the scenes.

• JSX stands for JavaScript XML. It allows you to write HTML inside JavaScript:
• JSX gets transpiled to React.createElement() behind the scenes.

What is a component in React?

A component is a building block of a React app. It can be: Functional Component or Class Component it is nothing but a function which return jsx code means html code

• A component is a building block of a React app. It can be: Functional Component or Class Component
• it is nothing but a function which return jsx code means html code

What are props in React?

Props (short for "properties") are read-only inputs to components: re the way we pass data from a parent component to a child component. Think of props as function arguments, but for components. They're read-only, meaning the child component can't modify the props it receives: just like how function parameters shouldn't be changed.

• Props (short for "properties") are read-only inputs to components:
• re the way we pass data from a parent component to a child component. Think of props as function arguments, but for components.
• They're read-only, meaning the child component can't modify the props it receives: just like how function parameters shouldn't be changed.

What is state in React?

State represents mutable data managed within a component: Changing state triggers a re-render of component

• State represents mutable data managed within a component:
• const [count, setCount] = useState(0);
• Changing state triggers a re-render of component

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

What is the use of useState and useEffect?

useState – For managing state in functional components useEffect – For side effects like fetching data or subscriptions dependency=> to react on state changes, if empty on page load only it will execute

• useState – For managing state in functional components
• useEffect – For side effects like fetching data or subscriptions
• useEffect(() => { console.log('Component mounted or updated'); }, [dependency]);
• dependency=> to react on state changes, if empty on page load only it will execute

useEffect(() => {
  console.log('Component mounted or updated');
}, [dependency]);

What is the Virtual DOM and how does it work?

React maintains a lightweight copy of the real DOM. On updates: React creates a Virtual DOM tree Compares it with previous one (diffing) Applies minimal real DOM changes

• React maintains a lightweight copy of the real DOM. On updates:
• React creates a Virtual DOM tree
• Compares it with previous one (diffing)
• Applies minimal real DOM changes

Controlled vs Uncontrolled Components

In a Controlled Component, form data is handled by a React component state (useState). In an Uncontrolled Component, form data is handled directly by the DOM itself using refs (useRef).

• Controlled: Value is bound to state via value={name} and updated via onChange={e => setName(e.target.value)}.
• Uncontrolled: Value is pulled on-demand from the DOM using a ref: inputRef.current.value.
• Controlled is preferred for immediate field validation, dynamic disabled buttons, and conditional formatting.

// Controlled Component:
function Controlled() {
  const [val, setVal] = useState('');
  return <input value={val} onChange={(e) => setVal(e.target.value)} />;
}

// Uncontrolled Component:
function Uncontrolled() {
  const inputRef = useRef(null);
  return <input ref={inputRef} defaultValue="Hello" />;
}

What are keys in React and why are they important?

Controlled Component: React state controls the form input value. Keys are unique identifiers for elements in a list. Help React identify which items changed, added, or removed.

• Keys are unique identifiers for elements in a list.
• Help React identify which items changed, added, or removed.

What is the use of React Router?

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

npm install react-router-dom

What is memoization in React?

Memoization helps optimize performance by avoiding unnecessary re-renders. React.memo() → Memoize a functional component useMemo() → Memoize a value useCallback() → Memoize a function

• React.memo() → Memoize a functional component
• useMemo() → Memoize a value
• useCallback() → Memoize a function