1. getDerivedStateFromProps – 1. Invoked right before calling render() and is invoked on every render. This exists for rare use cases where you need a derived state
2. componentDidMount – 1. Executed after first rendering and where all AJAX requests, DOM or state updates, and set up event listeners should occur
3. shouldComponentUpdate – 1. Determines if the component will be updated or not. By default, it returns true.
2. If you are sure that the component doesn’t need to render after the state or props are updated, you can return a false value
3. It is a great place to improve performance as it allows you to prevent a re-render if component receives a new prop
4. getSnapshotBeforeUpdate – 1. Executed right before rendered output is committed to the DOM
2. Any value returned by this will be passed into componentDidUpdate()
3. This is useful to capture information from the DOM i.e. scroll position
5. componentDidUpdate – 1. used to update the DOM in response to prop or state changes.
2. This will not fire if shouldComponentUpdate() returns false
6. componentWillUnmount – used to cancel any outgoing network requests, or remove all event listeners associated with the component
* hooks
>> React Hooks are the built-in functions that permit developers for using the state and lifecycle methods within React components.
There are 2 rules which must be followed while you code with Hooks:
React Hooks must be called only at the top level. It is not allowed to call them inside the nested functions, loops, or conditions. It is allowed to call the Hooks only from the React Function Components.
@@useEffect > {
>> used for performing the side effects in functional components. With the help of useEffect, you will inform React that your component requires something to be done after rendering the component or after a state change
>> The useEffect React Hook will accept 2 arguments: useEffect(callback,[dependencies]);
}
* custom hooks
–a function in Javascript whose name begins with ‘use’ and which calls other hooks.
* refs > {
refs were only limited to class components but now it can also be accessible in function components through the useRef Hook in React
The refs are used for:
>> Managing focus, media playback, or text selection.
Error boundaries provide a way for us to catch errors that occur in the render phase.
Any component which uses one of the following lifecycle methods is considered an error boundary.
In what places can an error boundary detect an error?
Render phase
Inside a lifecycle method
Inside the constructor
}
@@prop drilling
Sometimes while developing React applications, there is a need to pass data from a component that is higher in the hierarchy to a component that is deeply nested. To pass data between such components, we pass props from a source component and keep passing the prop to the next component in the hierarchy till we reach the deeply nested component.
Example:
What is the virtual DOM? How does react use the virtual DOM to render the UI?
As stated by the react team, virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the real DOM by a library such as ReactDOM.
Error boundaries are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
React Attempt – 3 – LTI-Mindtree – 22-Mar-2025
——————————————–
technical:
1. useCallback vs useMemo by example
2. useRef
3. get last value of array
4. webpack
coding:
1. let a = {name:balas, age:20}; let b = a; b.age = 25; console.log(a.age);
2. let a = {name:balas, age:20}; let b = [..a]; b.age = 25; console.log(a.age);
3. const {details:data} = {name:balas, age:20}; console.log(data.age);
4. let a = [a,b,c,d,e,f,g,h,i]; // b = [i,g,c,h,e,d,h,c,a]
5. fakestore.api/products, show data
6. let name = “Hi, i am balamurugan”;
React Attempt – 1 – Armada – 3-Mar-2025
——————————————–
technical:
1. async vs promise
2. example of promise
3. react redux
4. redux structure
5. useEffect
6. Context API
coding:
[]
#machineTest
1. split array into chunks
2. reverse text || condition
3. add value between in array
4. sort numbers with loop
5. computer salary of employees
6. react: {
6. fetch api and output in react
7. increment, decrement in react
8. show hide text
9. set timer, stop, reset
10. todo app
11. progress bar
12.
}
13. find Max Number
14. function that takes an array of numbers and returns a new array with only the even numbers
15. function to check if a given number is prime.
16. program to find the largest element in a nested array
17. to convert a string to title case (capitalize the first letter of each word)
18. Implement a debounce function in JavaScript that limits the frequency of a function’s execution when it’s called repeatedly within a specified time frame.
19. Write a function that takes an array of objects and a key, and returns a new array sorted based on the values of that key in ascending order.
20. write a function to find the largest and smallest numbers in the array.
21. Write a function that takes an array of integers as input and returns a new array with only the unique elements.
22. Implement a function to find the sum of all the numbers in an array
23. Given a string, write a function to count the occurrences of each character in the string.
24. Implement a function to remove duplicates from an array.
25. Write a function that sorts an array of numbers in ascending order
26. Implement a function that flattens a nested array into a single-dimensional array.
27. Implement a function that finds the second smallest element in an array of integers.
28. Implement a function that returns the average value of numbers in an array.
29. Write a function that sorts an array of strings in alphabetical order.
30. Write a function that removes all falsy values (false, null, 0, “”, undefined, and NaN) from an array
31. Write a function that finds the second largest number in an array.
32. Garbage collection and Memory Leaks
