How do you use multiple useEffect in a component?

useEffect is a hook used to perform side effects in function components. If you need to use multiple useEffect hooks in a single component, you can simply place them one after the other within your component function.

Key Points for Using Multiple useEffect Hooks:

• Separation of Concerns: Each useEffect hook should handle a specific side effect or concern. This helps to keep your code organized and easier to understand.
• Order Matters: The order in which you define useEffect hooks within your component matters. They will be executed in the same order as they are declared.
• Dependency Arrays: Each useEffect can have its dependency array, which specifies when the effect should run. If the dependency array is empty ([]), the effect runs only once when the component mounts. If you provide dependencies, the effect runs whenever any of those dependencies change.
• Dependencies Management: Be careful with dependencies to prevent unnecessary re-renders or side effects. Ensure that you include only the necessary dependencies for each useEffect hook.
• Readability: Keep your code readable by placing each useEffect hook logically in relation to the component's behavior. If one effect depends on another, consider placing them close together.

Example: Below is an example of using multiple useEffect in a component. The Timer component utilizes two useEffect hooks: one manages a timer based on the isActive state, while the other triggers an alert at 10 seconds, each with their specific dependencies, alongside functions to control the timer.

Output: