React Basic Questions and Answers

1. Controlled Vs Uncontrolled Component
1. Controlled components refer to the components where the state and behaviors are controlled by Parent components 
2. while Uncontrolled components are the ones having control of their own state and manage the behaviors on themselves(useref) (Use ref will update the real dom directly)
2. React Hook 
3. Higher Order Components
1. React are a pattern that allows you to reuse component logic. They are functions that take a component and return a new component with additional props or logic. HOCs are commonly used for cross-cutting concerns like authentication, data fetching, and state management
• // This is your HOC
• function withLogger(WrappedComponent) {
•   return class extends React.Component {
•     componentDidMount() {
•       console.log('Component Mounted');
•     }
•   
•     render() {
•       return <WrappedComponent {...this.props} />;
•     }
•   };
• }
• 
  
• // Usage of HOC
• class MyComponent extends React.Component {
•   render() {
•     return <div>Hello, World!</div>;
•   }
• }
• 
  
• const MyComponentWithLogger = withLogger(MyComponent);
• export default MyComponentWithLogger;
4. Props Drilling
5. How to avoid props Drilling
6. Functional Vs Class Components
7. How to pass data from parent to child and child to parent
8. Imperative Hooks in react
9. What is Virtual Dom
10. How react is working
11. How to acheive life cycle method in function components
12. life cycle method
13. how to improve the performance of the react appication
14. what is BABEL
15. Error handling
16. Redux architecture flow
17. Unit test in React
18. Lazy loading in React
19. React.Memo VS Usememo  
1. React.Memo - used in the export default which is similar to pure components or shouldcomponetsupdate life cycle
2. Usememo - Its the Hooks in react render only when dependency value changed
20. Unmounting is class and function
1. In class the unmounting is done in the componentWillUnmount
2. In function the useeffect will cleanup in return.
• useEffect(() => {
•     let timer = setTimeout(() => {
•     setCount((count) => count + 1);
•   }, 1000);
• 
  
•   return () => clearTimeout(timer)
•   }, []);
21. Useeffect Vs Uselayout effect
1. Useeffect - Run after render and paint(Non blocked)
2. UseLayouteffect - Run after render but before the paint (It will block the rendering Performance)
22. Redux store: When the same application open in the multiple windows how the redux store will work
1. For each windows have is own instant created . state in one windows will not automation sync.
1. Local storage
2. Broadcast Channel API
3. Backend synk