Effect Hooks
Effects in React allow components to interact with and stay synchronized with external systems, such as handling network requests, manipulating the browser’s DOM, managing animations, integrating with widgets from other UI libraries, and working with non-React code. Essentially, effects help components communicate and coordinate with the world outside of React.
- useEffect is used to connect component to an external system.
const ClassRoom ()=>{
useEffect(() => {
// Effect code here
return () => {
//Here clean up code };
}, [dependencies]);
}
There are two different useEffect approach that are rarely used.
- useLayoutEffect performs a side effect immediately after the browser has painted the screen.
- useInsertionEffect is used before ReactJS makes changes to the DOM, and in this libraries can insert the dynamic CSS.
Built-in React Hooks
In React, built-in Hooks are like tools that empower your components with various functionalities. They give you the flexibility to use different features without having to create class components. You can either utilize the hooks provided by React or mix and match them to create custom hooks tailored to your needs. Here’s a list of all the pre-built hooks available in React.