UseEffect discussion.md

React useEffect Discussion

The goal from this discussion is to solidify your understanding about useEffect after studying about it before the class and in the class.

Please discuss the following questions between you and answer them in the comment section below.

Questions:

0. What is useEffect?
1. What do we mean when we say that useEffect is a hook?
2. useEffect gets executed in 3 different ways, what are they? (Adding code examples would be beneficial)

1. Selepe Thinane

2. Mthokozisi Dlamini

3. lethukuthula Mkhondo

4. useEffect is react hook that can be used perform side effects

5. is a hook because it's a special function you can "hook" into your React components

• It allows you to perform actions outside the normal rendering process of a component, like fetching data or setting timers. This keeps your component code cleaner and easier to understand.

useEffect can be executed on every render / at the beginning and when changes occur

const MyComponent = () => {
const [data, setData] = useState(null); // Assume useState for data

useEffect(() => {
console.log('This runs after every render');
});

useEffect(() => {
// Fetch data on initial render (empty dependency array)
fetchData().then(data => setData(data));
}, []);

useEffect(() => {
// Do something whenever data changes (dependency on data)
if (data) {
console.log("Data received:", data);
}
}, [data]);

return (

{data &&

Fetched data: {data}

}

);
};

Team Members(Phamela, Siyabonga and Nhlanhla)
Answers.
0. useEffect` is a hook in React that allows you to perform side effects in function components. It's used to execute code that needs to run after the component renders, such as data fetching, subscriptions, or manually changing the DOM.

1. React's useEffect hook, a special function for functional components, manages side effects (fetching data, timers) by running a function after the component renders, keeping your rendering logic clean and side effects well-controlled.

2- useEffect execution depends on the dependency array you provide:

On Every Render: Leave the dependency array empty ([]):

JavaScript
useEffect(() => {
// Code to run on every render
}, []);

• On Mount Only: Pass an empty dependency array:

JavaScript
useEffect(() => {
// Code to run only on initial render (similar to componentDidMount)
}, []);

• On Mount and When Dependencies Change: List the state or prop values the effect relies on:

JavaScript
const [count, setCount] = useState(0);

useEffect(() => {
// Code to run on mount and whenever count changes
}, [count]);