REACT Free Section Starter Challenge 30 min

3. Managing Side Effects with useEffect()

Overview: Synchronize external APIs, update document.title, and handle timers.

Concept & Syntax Guide

`useEffect(fn, deps)` runs after render. Specifying an empty dependency array `[]` ensures the effect runs only once when the component mounts.

Hands-On Practice Exercise

Update Document Title on Mount

Use `useEffect` to set `document.title = "Stro Hafta Catalog"` when the component mounts.

Target Output: Stro Hafta Catalog

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: Stro Hafta Catalog

REACT Code Editor

1
2
3
4
5
6
7
8
9
10

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
function PageHeader() {
  React.useEffect(() => {
    document.title = 'Stro Hafta Catalog';
    console.log('Title updated to: ' + document.title);
  }, []);
  return React.createElement('h2', { style: { color: '#0f172a' } }, 'Stro Hafta Catalog');
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(PageHeader));
</script>