React Hooks Overview with Examples

Build a Toggle Component

Create a functional component that toggles between 'ON' and 'OFF' states using useState.

Expected output: A button that toggles text between 'ON' and 'OFF' when clicked.

Hint: Use a boolean state and a button to toggle its value.

Fetch and Display Posts

Use useEffect to fetch posts from https://jsonplaceholder.typicode.com/posts and display their titles.

Expected output: A list of post titles displayed on the page.

Hint: Fetch data inside useEffect with an empty dependency array to run once.

Create a useDocumentTitle Custom Hook

Build a custom hook that sets the document title based on a string parameter.

Expected output: The browser tab title updates when the hook is used with different strings.

Hint: Use useEffect inside your custom hook to update document.title.

React Hooks are functions that let you use state and lifecycle features in functional components. They were introduced to simplify component logic and enable code reuse without classes.

useState is a hook that lets you add state to functional components. It returns a state variable and a function to update it, triggering re-renders on state changes.

useEffect runs side effects after component renders. It can run on mount, update, or unmount depending on the dependency array provided.