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 ?

Our group: Buse Şentürk, Moulham Hallak, Yeşim Nur Akar

1. it renders automatically when there is a change in its state/prop

2. it remembers a complex function. it memorizes the output of a function so that you won't have to re-render. should be used when there is a high amount of data. useMemo calls the func & returns its value and everytime you call it it will check whether there is a change in the dependencies. If not, returns the saved value without recalling the function again (bc its value is already memorized and still the same) but if changed, will call the func and repeat the process.

3. useEffect = (componentDidMount , componentDidUpdate and componentWillUnmount class lifecycle). We can combine this life cycle method using useEffect & we can set up listeners, fetch data from API and remove listeners before comp is removed from DOM.

componentWillUnmount is used for “cleanup”: it removes event listeners, cancels timers etc.

componentWillUnmount() {
console.log('Hello World');

}

// with useEffect()
useEffect(() => {
func () //let’s say
console.log('Hello World');
return () => {
// you can call another func that disconnects the func with database
console.log('Do some cleanup');
}
}, [ ])

4. componentDidUpdate is invoked immediately after any update. useEffect is like a shortcut for componentDidMount and componentDidUpdate (two birds at a time). takes two arguments: function and initial array (optional).
   // With componentDidUpdate()
   componentDidUpdate(prevProps) {
   console.log(Hello World ${prevProps});
   }
   // with useEffect()
   useEffect(() => {
   console.log('Hello World');
   }, [prevProps])

1- React components automatically re-render whenever there is a change in their state or props.

2- useMemo is a hook that memorize the output of a function and it accept 2 arguments.

3- componentWillUnmount() {
console.log('Hello World');
}

// with useEffect()
useEffect(() => {
console.log('Hello World');
return () => {
console.log('Do some cleanup');
}
}, [])

4- useEffect(() => {
console.log('Hello World');
}, [prevProps])

Group Members: Mustafa / Moumen / Isa

Group Room 7 - M. Zakaria Alalaya, Mohammed Manar Yazji, Ayşe Çimen Başar

1. The react component re-renders automatically whenever a state or a prop changes / gets updated

2. • useMemo is a React hook that memorizes the output of a function.
   • In memoization, the result is remembered, when the same exact parameters are passed-in subsequently.
   • If we have a function to execute 1 + 1, it will return 2. But if it uses memoization, the next time we run 1’s through the function it won’t
     add them up, it will just remember the answer is 2 without executing the adding function.
   • useMemo accepts two arguments: a function and a list of dependencies.
     --> const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

3. componentWillUnmount is a life cycle of React that we use in Class Components and is used to perform clean-up for any DOM-elements.
   But with the hooks, we can use life cycle methods in React with function components and we do this with UseEffect
   The replication will be as follows :
   // With componentWillUnmount()
   componentWillUnmount() {
   console.log('Hello World');
   }
   // with useEffect()
   useEffect(() => {
   console.log('Hello World');
   return () => {
   console.log('Do some cleanup');
   }
   }, [])

4. componentDidUpdate method is invoked immediately after updating occurs.
   When we want our state to change when the component renders, we use this method. And we put our state as our initial value in our UseEffect hook.
   The replication will be as follows:
   // With ccomponentDidUpdate()
   componentDidUpdate(prevProps) {
   console.log(Hello World ${prevProps});
   }
   // with useEffect()
   useEffect(() => {
   console.log('Hello World');
   }, [prevProps])