;stroke-width:0px;}%3c/style%3e%3clinearGradient%20id='b'%20x1='4.3'%20y1='22.8'%20x2='19.8'%20y2='2.3'%20gradientTransform='translate(0%2025.3)%20scale(1%20-1)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23f9e833'/%3e%3cstop%20offset='.4'%20stop-color='%23facb3a'/%3e%3cstop%20offset='1'%20stop-color='%23fbb140'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20class='c'%20d='m11.5,19.8c.3-.2.8-.2,1.1,0l5.5,2.9c1.2.6,1.9,0,1.7-1.2l-1-6.1c0-.3,0-.8.3-1l4.4-4.3c.9-.9.6-1.8-.7-2l-6.1-.9c-.3,0-.7-.3-.9-.6L13.1.9c-.6-1.2-1.5-1.2-2.1,0l-2.7,5.6c-.1.3-.5.6-.9.6l-6.1.9c-1.3.2-1.6,1.1-.7,2l4.4,4.3c.2.2.4.7.3,1l-1,6.1c-.2,1.3.5,1.9,1.7,1.2l5.5-2.9h0Z'/%3e%3c/svg%3e){kind=small}
1.
What is React and why is it used?
Answer:
React Basics
- 2.
How is React different from Angular or Vue?
Answer: - 3.
What is a React component?
Answer: - 4.
How do you create a component in React?
Answer: - 5.
What is JSX and why do we use it in React?
Answer: - 6.
Can you explain the virtual DOM in React?
Answer: - 7.
What are the differences between a class component and a functional component?
Answer: - 8.
How do you handle events in React?
Answer: - 9.
What are state and props in React?
Answer: - 10.
How do you pass data between components in React?
Answer:
React State Management
- 11.
What is a stateful component?
Answer: - 12.
Can you explain how useState works?
Answer: - 13.
How do you update the state of a parent component from a child component?
Answer: - 14.
What is lifting state up in React?
Answer: - 15.
When do you use Redux or Context API for state management?
Answer:
React Lifecycle & Hooks
- 16.
Explain the lifecycle methods of a React class component.
Answer: - 17.
How do hooks work in React?
Answer: - 18.
Can you describe the useEffect hook and its purpose?
Answer: - 19.
How do you fetch data with hooks in React?
Answer: - 20.
What rules do you have to follow when using hooks?
Answer:
Component Communication
- 21.
How do props work in React?
Answer: - 22.
What is prop drilling and how can you avoid it?
Answer: - 23.
Explain the Context API and its use cases.
Answer: - 24.
How do you use render props?
Answer: - 25.
What is the children prop?
Answer:
Performance Optimization
- 26.
Why is performance optimization important in React?
Answer: - 27.
What is React.memo and when would you use it?
Answer: - 28.
How does PureComponent differ from Component in React?
Answer: - 29.
Can you explain the concept of reconciliation in React?
Answer: - 30.
How can you prevent unnecessary re-renders in React?
Answer:
Styling in React
- 31.
How do you apply styles in a React application?
Answer: - 32.
What is CSS-in-JS and how do you implement it in React?
Answer: - 33.
Can you describe how Styled-Components work?
Answer: - 34.
What are the advantages of using Sass or LESS in a React project?
Answer: - 35.
How do you use inline styles in React?
Answer:
React Routing
- 36.
What is React Router?
Answer: - 37.
How do you create dynamic routes in React?
Answer: - 38.
How would you pass data to routes in React Router v5+?
Answer: - 39.
How do you programmatically navigate using React Router?
Answer: - 40.
What are route guards and how can you implement them in React?
Answer:
React Patterns
- 41.
What are higher-order components (HOCs)?
Answer: - 42.
Explain the container/presenter (smart/dumb) component pattern.
Answer: - 43.
How would you implement a compound component pattern in React?
Answer: - 44.
Explain the use of custom hooks in React.
Answer: - 45.
What is a render prop pattern?
Answer:
Form Handling
- 46.
How do you handle forms in React?
Answer: - 47.
What is controlled and uncontrolled components?
Answer: - 48.
How do you validate forms in React?
Answer: - 49.
What is Formik and how is it used in React forms?
Answer: - 50.
How do you handle file uploads in React?
Answer:
React with TypeScript
- 51.
What are the benefits of using TypeScript with React?
Answer: - 52.
How do you define types for props and state in TypeScript with React?
Answer: - 53.
Explain how to use interfaces with React components and TypeScript.
Answer: - 54.
How do TypeScript generics enhance react components?
Answer:
Testing in React
- 55.
Why is testing important in React?
Answer: - 56.
What are some common testing libraries for React?
Answer: - 57.
How do you test a React component with Jest?
Answer: - 58.
Can you explain the difference between shallow rendering and mount rendering in Enzyme?
Answer: - 59.
What is react-testing-library and how is it different from Enzyme?
Answer:
Advanced React Topics
- 60.
What are React fragments and why are they useful?
Answer: - 61.
What is React portal and when would you use it?
Answer: - 62.
How does error boundary work in React?
Answer: - 63.
What is server-side rendering and how is it done with React?
Answer: - 64.
Can you explain the concept of suspense and lazy loading in React?
Answer:
React and SEO
- 65.
How does React affect SEO?
Answer: - 66.
What strategies would you use to make a React application SEO-friendly?
Answer: - 67.
How can server-side rendering improve SEO with React applications?
Answer:
React Native
- 68.
What is React Native and how is it different from React?
Answer: - 69.
How do you bridge native modules in React Native?
Answer: - 70.
Can you describe the layout system in React Native?
Answer:
State Management Libraries & GraphQL
- 71.
What is Apollo Client and how does it integrate with React?
Answer: - 72.
How do you manage local state in Apollo Client?
Answer: - 73.
What is Redux and how does it contrast with the Context API?
Answer: - 74.
Can you detail the Redux workflow?
Answer: - 75.
How do you handle side effects in Redux applications?
Answer:
React Development Environment & Tooling
- 76.
How do you set up a React project from scratch?
Answer: - 77.
What is Babel and why do we use it with React?
Answer: - 78.
What is Webpack and what role does it play in React development?
Answer: - 79.
How does hot module replacement work in React?
Answer: - 80.
What are the features of create-react-app and how do you eject from it?
Answer:
Integrations and API Handling
- 81.
How do you handle API calls in React?
Answer: - 82.
What is Axios and how is it used over fetch in React applications?
Answer: - 83.
How would you handle WebSocket connections in a React application?
Answer: - 84.
What are some strategies used to connect a React front end to a backend server?
Answer:
Deployment and Optimization
- 85.
How would you deploy a React application?
Answer: - 86.
How do you optimize the performance of a React application for production?
Answer: - 87.
What are service workers and how can they benefit a React application?
Answer: - 88.
How do you configure HTTPS in a React app?
Answer:
Accessibility in React
- 89.
Why is accessibility important in web development?
Answer: - 90.
How can you make a React application accessible?
Answer: - 91.
What is ARIA and how it is used in React?
Answer:
Internationalization and Localization
- 92.
What is internationalization (i18n) in React?
Answer: - 93.
How do you implement localization (l10n) in a React app?
Answer:
React Code Structure & Best Practices
- 94.
How do you structure large React applications?
Answer: - 95.
What are some best practices when writing React code?
Answer: - 96.
How do you ensure code quality and maintainability in a React project?
Answer:
React and Git Workflows
- 97.
How do you manage feature branches in React development with Git?
Answer: - 98.
What are your strategies for resolving merge conflicts in React projects?
Answer:
React Interviews Problem Solving and Scenarios
- 99.
How would you handle a feature request or bug report in an ongoing React project?
Answer: - 100.
Describe your process for optimizing a component that has complex state logic and several child components.
Answer:
%20--%3e%3csvg%20version='1.1'%20id='Слой_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20101%20101'%20style='enable-background:new%200%200%20101%20101;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:%23FFFFFF;}%20%3c/style%3e%3cpath%20class='st0'%20d='M80.1,90c0.7,0,1.2-0.6,1.2-1.4c0-0.8-0.5-1.4-1.2-1.4H14.8c-2.7,0-4.9-2.5-4.9-5.6V15.2c0-0.8-0.5-1.4-1.2-1.4%20c-0.7,0-1.2,0.6-1.2,1.4v66.3c0,4.7,3.3,8.5,7.3,8.5H80.1z'/%3e%3cpath%20class='st0'%20d='M91.6,11H66.1c-0.7,0-1.2,0.6-1.2,1.4c0,0.8,0.5,1.4,1.2,1.4h22.7L63,43.7l-20.7,1.7l-0.7,0.4L22.4,67.7%20c-0.5,0.4-0.6,1.4-0.2,2c0.4,0.6,1.2,0.7,1.7,0.3c0.1-0.1,0.1-0.1,0.2-0.3l18.6-21.4l20.7-1.7l0.7-0.4l26.2-30.2v26%20c0,0.8,0.5,1.4,1.2,1.4s1.2-0.6,1.2-1.4V12.4C92.8,11.6,92.3,11,91.6,11z'/%3e%3c/svg%3e){kind=small}
%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%2044.5%2044.5'%20style='enable-background:new%200%200%2044.5%2044.5;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:none;stroke:%23202020;stroke-width:1.498;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.994;}%20.st1{fill:none;stroke:%23202020;stroke-width:1.498;stroke-linecap:round;stroke-miterlimit:10.005;}%20%3c/style%3e%3cpath%20class='st0'%20d='M11.4,28l11-11.5L33.1,28'/%3e%3ccircle%20class='st1'%20cx='22.2'%20cy='22.2'%20r='21.5'/%3e%3c/svg%3e){kind=small}