useEffect Discussion

useEffect.md

1. When does a React component re-render?
2. What does the React.useMemo hook do?
3. How can you replicate componentWillUnmount using useEffect ?
4. How can you replicate componentDidUpdate using useEffect ?

Team members: Ali Majid, Abdulbari Qaisar , Ahmed Hassoun , Mhammad Raslan
1-When that data will be updated and then the component should be re-rendered to the user to get the new data and for re-rendering we have to use hooks for example (usestate).
2-It's act like a cache and The React useMemo Hook returns a memoized value , allows you to memoize expensive functions so that you can avoid calling them on every render
3- return a function inside the callback function of the useEffect Hook
4-We do our side code inside of the callback function and we have to have a dependencey for the useEffect

Team : Banel - Dalia - Zoriana - Riham

1. When talking about React performance, there are two major stages that we need to care about:
   initial render - happens when a component first appears on the screen
   re-render - second and any consecutive render of a component that is already on the screen
   Re-render happens when React needs to update the app with some new data. Re-render can be caused due to any of the three reasons listed: 1) Update in State
   2) Update in prop
   3)Re-rendering of the parent component

2. useMemo is a React Hook that lets you cache the result of a calculation between re-renders. const cachedValue = useMemo(calculateValue, dependencies) Usage. Skipping expensive recalculations. Skipping re-rendering of components.

3. The only thing that we need to do is to return a function inside the callback function of the useEffect Hook

4. We pass our dependency array as the second parameter, and inside that array, we pass the dependency that we want to watch.

team Maryam ,Huda,Marshall,Fadi
1-there are two major stage: initial render,re-render
initial render happens when a component first appears on the screen
re-render:any render of a component that is already on screen.It happens when React needs to update the app with some new data.

2-The React useMemo Hook returns a memoized value. memoization value so that it does not need to be recalculated.
it only runs when one of it's dependency updates
3-The only thing that we need to do is to return a function inside the callback function of the useEffect Hook like this: useEffect(() => { window
4-To perform the equivalent of the componentDidUpdate using the useEffect Hook, we should do this: useEffect(() => { // Inside this callback function we perform our side effects. }, [dependency]);

Team Members: Nanor, Wafaa, Sakar, Sarah

1.React schedules a render every time the state of a component changes. Every re-render in React starts with a state change. It's the only “trigger” in React for a component to re-render.
2.useMemo allows you to memoize expensive functions so that you can avoid calling them on every render. When we update state in react, it’s going to re-render the entire component, so the function get slow every time we render the app. So, we can solve this problem in react with a hook called useMemo; it’s all about caching a value, so we don’t have to recompute it every single time.
3.We can replicate the componentWillUnmount by adding an empty array as a second argument after declaring an anonymous function
4. Using the componentDidUpdate with useEffect
To perform the equivalent of the componentDidUpdate using the useEffect Hook, we should do this:
useEffect(() => { // Inside this callback function we perform our side effects. }, [dependency]);

Hala, Danah, Shad, Aya, Maria

1- React components re-render props that are passed down, states and functions.
2- it returns a memoized value
3- return a function inside the callback function of the useEffect Hook
4- use them inside a callback function

team: Nisreen hamzah - Shahla Kamal - Yahia Hasan - Darya Naji

1- whenever the state change the component is going to change.

2- react's functional component uses the useMemo hook, which returns a memoized value,
(the idea is to catching the value that you dont have to recompute it every single time when the component rerendered.

3- const App = props => { useEffect(() => { // your code // once done with the component return () => { // your unmount code } }, [props.yourPropertyToWatch]); }

4- function App(props) { const { src } = props; React.useEffect(() => { init(); return () => cleanup(); }, [src]);

Batoul, Mustafa. Amin and Heyam

1-a React component re-render is a situation that happened when the app gets some change from the outside like when the user changes something inside the app or receives some data from an outside resource ,etc . a React component re-render is a situation that happened when the app gets some change from the outside like when the user changes something inside the app or receives some data from an outside resource ,etc .

2- useMemo memorizes a value of a function as long as the dependencies are the same, only when the dependencies change the function will run again. This is for when a function is heavy and slow instead of running it every time we save it in the memory to improve performance.

3- The only thing that we need to do is to return a function inside the callback function of the useEffect Hook like this:

useEffect(() => {
window.addEventListener("mousemove", () => {});
return () => {
window.removeEventListener("mousemove", () => {})
}
}, []);

4- Using the componentDidUpdate with useEffect

To perform the equivalent of the componentDidUpdate using the useEffect Hook, we should do this:
useEffect(() => { // Inside this callback function we perform our side effects. }, [dependency]);

Team : Nina Hawari, Noor ridha, Yousif Ismail, Ali ibrahim
A1 : Re-render happens when React needs to update the app with some new data. Usually, this happens as a result of a user interacting with the app or some external data coming through via an asynchronous request or some subscription model.
Non-interactive apps that don’t have any asynchronous data updates will never re-render, and therefore don’t need to care about re-renders performance optimization.

A2: The useMemo is a hook used in the functional component of react that returns a memoized value. In Computer Science, memoization is a concept used in general when we don't need to recompute the function with a given argument for the next time as it returns the cached result.

A3: By returning a function inside the callback function of the useEffect Hook like
useEffect(() => {
window.addEventListener("mousemove", () => {});
return () => {
window.removeEventListener("mousemove", () => {})
}
}, []);

A4: The componentDidUpdate is a lifecycle in React that gets called right after a change in props or state change has occurred. It is not called in the initial change but it takes care of all the other renders. componentDidUpdate takes in 3 arguments:

prevProps: props from the last render
prevState: state from the previous render
snapshot: the value from getSnapshotBeforeUpdate

1. Re-render occurs when react needs to update the app with some new data.

2-The React useMemo Hook returns a memoized value. So if we want to calculate a big amount of data without needing to do the process all over again and effecting on other operations or delay them we use usememo to save our values.

3. To use useEffect() as componentwillunmount() we would make the return method in useEffect(). It will be called each time when this component is un mounted from screen or application.

function ExampleComponent() {

	React.useEffect(() => {
		console.log("Component1 has mounted...");
		return () => { console.log("Component1 has unmounted...")};
	},[]);

	return(
		<div>Component1</div>
	);
}

4.Each React part has a lifecycle, and one of them is componentDidUpdate. This lifecycle is when the React component state or prop value is updated. In class components, use the componentDidUpdate method to trigger side effects for the life cycle. ComponentUpdate is never called, because component never updates - instead, a new component is created every single time. useEffect is invoked asynchronously after the browser has already painted the screen.

EXAMPLE: const mounted = useRef();
useEffect(() => {
if (!mounted.current) {
// do componentDidMount logic
mounted.current = true;
} else {
// do componentDidUpdate logic
}
});

team members : Mahnaz, Aland, Roqaya and Baraa