![\"fsd](\"https:\/\/www.placementpreparation.io\/blog\/wp-content\/uploads\/2025\/01\/fsd-student-program-banner-horizontal.webp\")
<\/a><\/p>Practice React Interview Questions and Answers<\/h2>
Below are the 50 react interview questions for freshers with answers<\/p>
1. What is the purpose of ReactDOM in a React application?<\/h3>
Answer:<\/strong><\/p> ReactDOM is used to render React components into the DOM and handle DOM-specific methods.<\/p> ReactDOM.render(<App \/>, document.getElementById(‘root’));<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> Babel transpiles modern JavaScript (ES6+) and JSX into a format compatible with older browsers.<\/p> \/\/ JSX code Answer:<\/strong><\/p> Webpack bundles JavaScript files and assets, optimizing them for production.<\/p> \/\/ Webpack config example Answer:<\/strong><\/p> JSX is a syntax extension for JavaScript that allows you to write HTML elements within JavaScript.<\/p> const element = <h1>Hello, JSX!<\/h1>;<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> Create React App is a tool that sets up a new React project with a standardized build configuration.<\/p> npx create-react-app my-app<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> JavaScript expressions can be embedded in JSX using curly braces {}<\/strong>.<\/p> javascript Answer:<\/strong><\/p> JSX is syntactically similar to HTML but comes with some differences like the use of className<\/strong> instead of class<\/strong>.<\/p> const element = <div className=”container”><\/div>;<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> Yes, you can use ternary operators or logical operators to conditionally render elements in JSX.<\/p> const isLoggedIn = true; Answer:<\/strong><\/p> Inline styles in JSX are applied using a JavaScript object with camelCased properties.<\/p> const style = { color: ‘blue’, fontSize: ’20px’ }; Answer:<\/strong><\/p> Best practices include keeping JSX code clean, using meaningful variable names, and breaking down large components into smaller ones.<\/p> function Greeting({ name }) { Answer:<\/strong><\/p> Functional components are simple JavaScript functions, while class components are ES6 classes with state and lifecycle methods.<\/p> \/\/ Functional component \/\/ Class component Answer:<\/strong><\/p> You can export a component using export default<\/strong> and import it using import<\/strong>.<\/p> \/\/ Export \/\/ Import Answer:<\/strong><\/p> React components should be named in PascalCase, where each word starts with an uppercase letter.<\/p> function MyComponent() { Answer:<\/strong><\/p> Data is passed to a child component using props.<\/p> function Parent() { function Child({ name }) { Answer:<\/strong><\/p> The render()<\/strong> method returns the JSX that should be rendered to the DOM.<\/p> class MyComponent extends React.Component { Answer:<\/strong><\/p> State in a functional component is managed using the useState<\/strong> hook.<\/p> function Counter() { Answer:<\/strong><\/p> PropTypes are used to validate the types of props passed to a component.<\/p> import PropTypes from ‘prop-types’;<\/p>\n function Greeting({ name }) { Greeting.propTypes = { Answer:<\/strong><\/p> Props are immutable and passed down from parent to child components, while state is mutable and managed within the component.<\/p> function Child({ propValue }) { \n[\/su_note]\n<\/p> Answer:<\/strong><\/p> Multiple state variables can be managed by calling useState<\/strong> multiple times.<\/p> function Form() { Answer:<\/strong><\/p> Direct mutation of state can lead to unexpected behavior and bugs because React relies on state immutability for efficient re-rendering.<\/p> \/\/ Incorrect \/\/ Correct Answer:<\/strong><\/p> Click events are handled by passing a function to the onClick<\/strong> attribute in JSX.<\/p> function Button() { Answer:<\/strong><\/p> Event binding ensures that this<\/strong> refers to the correct context when an event handler is called in a class component.<\/p> class MyComponent extends React.Component { Answer:<\/strong><\/p> Controlled components have their input values managed by React state, while uncontrolled components store their values in the DOM.<\/p> \/\/ Controlled \/\/ Uncontrolled Answer:<\/strong><\/p> Form submission is handled by attaching an onSubmit<\/strong> event handler to the form element.<\/p> function MyForm() { Answer:<\/strong><\/p> Use the event.preventDefault()<\/strong> method to prevent the default behavior of an event.<\/p> function Link() { Answer:<\/strong><\/p> Conditional rendering can be achieved using if<\/strong> statements or ternary operators within the JSX.<\/p> function Greeting({ isLoggedIn }) { Answer:<\/strong><\/p> The ternary operator allows you to render different elements based on a condition in a single line of JSX.<\/p> const message = isLoggedIn ? ‘Welcome back!’ : ‘Please sign in’;<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> The logical &&<\/strong> operator renders an element if the condition is true, otherwise, it renders nothing.<\/p> const isLoggedIn = true; Answer:<\/strong><\/p> If-else<\/strong> statements are clear and easy to understand but can make the JSX verbose and harder to manage as conditions grow complex.<\/p> if (condition) { Answer:<\/strong><\/p> You can render a fallback UI using conditional statements or ternary operators when a condition is not met.<\/p> return hasError ? <ErrorComponent \/> : <MainComponent \/>;<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> Use the map()<\/strong> function to iterate over an array and render each item as a React element.<\/p> const items = [‘Item 1’, ‘Item 2’, ‘Item 3’]; Answer:<\/strong><\/p> Keys help React identify which items have changed, are added, or are removed, optimizing the rendering process.<\/p> const listItems = items.map(item => <li key={item.id}>{item.name}<\/li>);<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> React will still render the list, but it will warn you in the console about the missing keys, which can lead to inefficient rendering.<\/p> \/\/ Missing keys example Answer:<\/strong><\/p> Use the map()<\/strong> function to iterate over the array and render elements based on object properties.<\/p> const items = [{ id: 1, name: ‘Item 1’ }, { id: 2, name: ‘Item 2’ }]; Answer:<\/strong><\/p> Use unique identifiers like IDs or indices as keys, but avoid using indices if the list order might change.<\/p> const listItems = items.map((item, index) => <li key={item.id}>{item.name}<\/li>);<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> componentDidMount<\/strong> is used to perform actions after the component has been rendered to the DOM, such as fetching data.<\/p> componentDidMount() { Answer:<\/strong><\/p> componentDidUpdate<\/strong> is used to perform actions after the component’s state or props have changed.<\/p> componentDidUpdate(prevProps, prevState) { Answer:<\/strong><\/p> componentWillUnmount<\/strong> is called just before the component is removed from the DOM, allowing you to clean up resources.<\/p> componentWillUnmount() { Answer:<\/strong><\/p> A re-render is triggered by calling setState<\/strong> with a new state or when the component receives new props.<\/p> this.setState({ count: this.state.count + 1 });<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> shouldComponentUpdate<\/strong> allows you to control whether a component should re-render when its state or props change.<\/p> shouldComponentUpdate(nextProps, nextState) { Answer:<\/strong><\/p> React Hooks allow you to use state and other React features in functional components without writing a class.<\/p> const [count, setCount] = useState(0);<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> useEffect<\/strong> runs side effects like data fetching or subscriptions after every render or when specified dependencies change.<\/p> useEffect(() => { Answer:<\/strong><\/p> Hooks must be called at the top level of a component and only inside React functional components or custom hooks.<\/p> \/\/ Correct usage \/\/ Incorrect usage Answer:<\/strong><\/p> A custom hook is a JavaScript function that starts with use<\/strong> and can call other hooks inside it.<\/p> function useCustomHook() { Answer:<\/strong><\/p> useReducer<\/strong> is used for managing complex state logic in functional components, similar to how a reducer works in Redux.<\/p> const [state, dispatch] = useReducer(reducer, initialState);<\/p>\n<\/div><\/div> Answer:<\/strong><\/p> Install React Router and wrap your app with BrowserRouter<\/strong>, then define routes using Route<\/strong>.<\/p> import { BrowserRouter as Router, Route } from ‘react-router-dom’;<\/p>\n function App() { Answer:<\/strong><\/p> Use the Link<\/strong> or NavLink<\/strong> components to navigate between different routes in a React app.<\/p> <Link to=”\/about”>About<\/Link><\/p>\n<\/div><\/div> Answer:<\/strong><\/p> URL parameters are dynamic parts of the URL that you can access in your component via useParams<\/strong>.<\/p> function Profile() { Answer:<\/strong><\/p> Use the Switch<\/strong> component with a wildcard * route as the last route to catch all unmatched paths.<\/p>2. Explain the role of Babel in a React project.<\/h3>
\nconst element = <h1>Hello, world!<\/h1>;<\/p>\n<\/div><\/div>3. How does Webpack contribute to a React application?<\/h3>
\nmodule.exports = {
\nentry: ‘.\/src\/index.js’,
\noutput: {
\nfilename: ‘bundle.js’,
\n},
\n};<\/p>\n<\/div><\/div>4. What is JSX, and why is it used in React?<\/h3>
5. Describe the purpose of Create React App in a React project.<\/h3>
6. How do you embed JavaScript expressions in JSX?<\/h3>
\nCopy code
\nconst name = “John”;
\nconst element = <h1>Hello, {name}!<\/h1>;<\/p>\n<\/div><\/div>7. What is the difference between JSX and HTML?<\/h3>
8. Can you use conditional expressions directly in JSX?<\/h3>
\nconst message = <h1>{isLoggedIn ? ‘Welcome back!’ : ‘Please sign in’}<\/h1>;<\/p>\n<\/div><\/div>9. How do you apply inline styles to a JSX element?<\/h3>
\nconst element = <h1 style={style}>Styled Text<\/h1>;<\/p>\n<\/div><\/div>10. What are the best practices for writing JSX code?<\/h3>
\nreturn <h1>Hello, {name}!<\/h1>;
\n}<\/p>\n<\/div><\/div>11. What is the difference between functional and class components?<\/h3>
\nfunction Greeting() {
\nreturn <h1>Hello!<\/h1>;
\n}<\/p>\n
\nclass Greeting extends React.Component {
\nrender() {
\nreturn <h1>Hello!<\/h1>;
\n}
\n}<\/p>\n<\/div><\/div>12. How do you export and import a React component?<\/h3>
\nexport default function Greeting() {
\nreturn <h1>Hello!<\/h1>;
\n}<\/p>\n
\nimport Greeting from ‘.\/Greeting’;<\/p>\n<\/div><\/div>13. What are the naming conventions for React components?<\/h3>
\nreturn <div>My Component<\/div>;
\n}<\/p>\n<\/div><\/div>14. How do you pass data from a parent component to a child component in React?<\/h3>
\nreturn <Child name=”John” \/>;
\n}<\/p>\n
\nreturn <h1>Hello, {name}!<\/h1>;
\n}<\/p>\n<\/div><\/div>15. What is the purpose of the render() method in a class component?<\/h3>
\nrender() {
\nreturn <div>Hello, World!<\/div>;
\n}
\n}<\/p>\n<\/div><\/div>16. How do you define state in a functional component?<\/h3>
\nconst [count, setCount] = useState(0);
\nreturn <button onClick={() => setCount(count + 1)}>Count: {count}<\/button>;
\n}<\/p>\n<\/div><\/div>17. What are PropTypes, and how do you use them in a component?<\/h3>
\nreturn <h1>Hello, {name}!<\/h1>;
\n}<\/p>\n
\nname: PropTypes.string.isRequired,
\n};<\/p>\n<\/div><\/div>18. Explain the difference between props and state in React.<\/h3>
\nconst [stateValue, setStateValue] = useState(”);
\nreturn <div>{propValue} {stateValue}<\/div>;
\n}<\/p>19. How do you manage multiple state variables in a functional component?<\/h3>
\nconst [name, setName] = useState(”);
\nconst [email, setEmail] = useState(”);
\nreturn <div>{name} {email}<\/div>;
\n}<\/p>\n<\/div><\/div>20. Why is it important to avoid directly mutating the state in React?<\/h3>
\nthis.state.value = newValue;<\/p>\n
\nthis.setState({ value: newValue });<\/p>\n<\/div><\/div>21. How do you handle click events in a React component?<\/h3>
\nconst handleClick = () => alert(‘Button clicked’);
\nreturn <button onClick={handleClick}>Click me<\/button>;
\n}<\/p>\n<\/div><\/div>22. What is event binding, and why is it needed in React?<\/h3>
\nconstructor(props) {
\nsuper(props);
\nthis.handleClick = this.handleClick.bind(this);
\n}
\nhandleClick() {
\nconsole.log(‘Button clicked’);
\n}
\nrender() {
\nreturn <button onClick={this.handleClick}>Click me<\/button>;
\n}
\n}<\/p>\n<\/div><\/div>23. Explain the difference between controlled and uncontrolled components.<\/h3>
\n<input value={this.state.value} onChange={this.handleChange} \/><\/p>\n
\n<input defaultValue=”default” ref={this.inputRef} \/><\/p>\n<\/div><\/div>24. How do you handle form submission in React?<\/h3>
\nconst handleSubmit = (event) => {
\nevent.preventDefault();
\nconsole.log(‘Form submitted’);
\n};
\nreturn <form onSubmit={handleSubmit}>…<\/form>;
\n}<\/p>\n<\/div><\/div>25. How do you prevent the default behavior of an event in React?<\/h3>
\nconst handleClick = (event) => {
\nevent.preventDefault();
\nconsole.log(‘Link clicked’);
\n};
\nreturn <a href=”#” onClick={handleClick}>Click me<\/a>;
\n}<\/p>\n<\/div><\/div>26. How do you render elements based on a condition in React?<\/h3>
\nif (isLoggedIn) {
\nreturn <h1>Welcome back!<\/h1>;
\n} else {
\nreturn <h1>Please sign in<\/h1>;
\n}
\n}<\/p>\n<\/div><\/div>27. Explain how to use the ternary operator for conditional rendering in React.<\/h3>
28. How do you conditionally render an element using the logical && operator in React?<\/h3>
\nreturn <div>{isLoggedIn && <h1>Welcome back!<\/h1>}<\/div>;<\/p>\n<\/div><\/div>29. What are the pros and cons of using if-else statements for conditional rendering in React?<\/h3>
\nreturn <ComponentA \/>;
\n} else {
\nreturn <ComponentB \/>;
\n}<\/p>\n<\/div><\/div>30. How can you render a fallback UI when a certain condition is not met in React?<\/h3>
31. How do you render a list of items in React?<\/h3>
\nconst listItems = items.map(item => <li key={item}>{item}<\/li>);<\/p>\n<\/div><\/div>32. Why are keys important when rendering lists in React?<\/h3>
33. What will happen if you forget to add a key to list items in React?<\/h3>
\nconst listItems = items.map(item => <li>{item.name}<\/li>);<\/p>\n<\/div><\/div>34. How can you handle arrays of objects when rendering lists in React?<\/h3>
\nconst listItems = items.map(item => <li key={item.id}>{item.name}<\/li>);<\/p>\n<\/div><\/div>35. What is the best practice for assigning keys to dynamically generated list items in React?<\/h3>
36. What is the componentDidMount lifecycle method used for in React?<\/h3>
\nfetchData().then(data => this.setState({ data }));
\n}<\/p>\n<\/div><\/div>37. How do you use componentDidUpdate in a React class component?<\/h3>
\nif (prevState.data !== this.state.data) {
\nthis.doSomethingWithUpdatedData();
\n}
\n}<\/p>\n<\/div><\/div>38. When is componentWillUnmount called in a React component?<\/h3>
\nclearInterval(this.timer);
\n}<\/p>\n<\/div><\/div>39. How can you trigger a re-render in a class component?<\/h3>
40. What is the purpose of the shouldComponentUpdate lifecycle method?<\/h3>
\nreturn nextState.count !== this.state.count;
\n}<\/p>\n<\/div><\/div>41. What are React Hooks, and why are they used?<\/h3>
42. How do you use the useEffect hook to perform side effects in a functional component?<\/h3>
\nfetchData().then(data => setData(data));
\n}, []);<\/p>\n<\/div><\/div>43. Explain the rules of Hooks in React.<\/h3>
\nfunction MyComponent() {
\nconst [count, setCount] = useState(0);
\n}<\/p>\n
\nif (condition) {
\nconst [count, setCount] = useState(0);
\n}<\/p>\n<\/div><\/div>44. How do you create a custom hook in React?<\/h3>
\nconst [state, setState] = useState(initialState);
\n\/\/ Custom logic
\nreturn [state, setState];
\n}<\/p>\n<\/div><\/div>45. What is the purpose of the useReducer hook, and when should you use it?<\/h3>
46. How do you set up React Router in a React application?<\/h3>
\nreturn (
\n<Router>
\n<Route path=”\/” component={Home} \/>
\n<\/Router>
\n);
\n}<\/p>\n<\/div><\/div>47. How do you navigate between different pages in a React application?<\/h3>
48. What are URL parameters in React Router, and how do you use them?<\/h3>
\nlet { id } = useParams();
\nreturn <h1>Profile ID: {id}<\/h1>;
\n}<\/p>\n<\/div><\/div>49. How do you define a route that catches all unmatched paths in React Router?<\/h3>