YouTip

\\ In this chapter, you will learn about React's most important side effect Hook—useEffect, and load blog data from a JSON file using fetch at the appropriate time.\\ \\ * * *\\ \\ ## What are Side Effects?\\ \\ In React, side effects refer to operations that are unrelated to rendering:\\ \\ * Requesting data from a server\\ * Operating localStorage\\ * Setting timers with setInterval\\ * Manually modifying the DOM\\ * Subscribing to external events\\ \\ Side effects cannot be executed directly in the component function body (they would execute on every render), and must be placed inside useEffect.\\ \\ * * *\\ \\ ## Basic Usage of useEffect\\ \\ ## Example\\ \\ import{ useState, useEffect } from 'react'\\ \\ function HomePage(){\\ \\ const[message, setMessage]= useState('Loading...')\\ \\ // useEffect(fn, deps)：Perform side effects after the component renders\\ \\ useEffect(()=>{\\ \\ console.log('The component has been mounted to the DOM, and side effects can now be executed')\\ \\ setMessage('Data loaded!')\\ \\ },[])// Empty dependency array = Execute only once after the first render\\ \\ return

{message}

\\ \\ }\\ \\ ### Three Ways to Write the Dependency Array\\ \\ | Writing | Execution Time | Use Case |\\ | --- | --- | --- |\\ | `useEffect(fn)` | Executes after every render | Rarely used, easily causes infinite loops |\\ | `useEffect(fn, [])` | Executes only once after the first render | Data loading, initializing third-party libraries |\\ | `useEffect(fn, )` | Executes after first render + when dep changes | Listening for specific data changes, performing responsive operations |\\ \\ > The difference between omitting the dependency array vs an empty array: `useEffect(fn)` executes after every render; `useEffect(fn, [])` executes only once after the first render. The formerEasily causes an infinite loop (effect in setState → Trigger render → Re-execute effect → ...），Almost never used.\\ \\ * * *\\ \\ ## Loading JSON Data with fetch\\ \\ Just like Vue3, we put the article data in the `public/posts.json` file.\\ \\ ### Step 1: Create the Data File\\ \\ ## Example\\ \\ // File path: public/posts.json\\ \\ [\\ \\ {\\ \\ "id": 1,\\ \\ "title": "React Getting StartedComplete Guide",\\ \\ "summary": "Learn React Hooks from scratch, covering core concepts like useState, useEffect, etc.",\\ \\ "content": "

Why learn React?

React is one of the most popular frontend frameworks today...

",\\ \\ "category": "React",\\ \\ "date": "2024-05-10"\\ \\ },\\ \\ {\\ \\ "id": 2,\\ \\ "title": "JavaScript Asynchronous Programming Explained",\\ \\ "summary": "Understand Promise, async/await, event loop, and microtask queue in one article.",\\ \\ "content": "

What is asynchronous?

JS is single-threaded...

",\\ \\ "category": "JavaScript",\\ \\ "date": "2024-05-08"\\ \\ },\\ \\ {\\ \\ "id": 3,\\ \\ "title": "CSS Grid Layout in Practice",\\ \\ "summary": "Use CSS Grid Easily implement complex responsive layouts.",\\ \\ "content": "

Grid Getting Started

Grid is a two-dimensional layout system...

",\\ \\ "category": "CSS",\\ \\ "date": "2024-05-05"\\ \\ }\\ \\ ]\\ \\ ### Step 2: Load Data in useEffect\\ \\ ## Example\\ \\ // File path: src/pages/HomePage.jsx\\ \\ import{ useState, useEffect, useMemo } from 'react'\\ \\ import BlogCard from '../components/BlogCard'\\ \\ import CategoryFilter from '../components/CategoryFilter'\\ \\ function HomePage(){\\ \\ const[articles, setArticles]= useState([])// Article data\\ \\ const[isLoading, setIsLoading]= useState(true)// Loading state\\ \\ const[error, setError]= useState(null)// Error message\\ \\ const[activeCategory, setActiveCategory]= useState('All')\\ \\ // useEffect Load data: Empty dependency array = Execute only once after the first render\\ \\ useEffect(()=>{\\ \\ let cancelled =false// Flag to prevent setState after component unmount\\ \\ async function fetchPosts(){\\ \\ setIsLoading(true)\\ \\ setError(null)\\ \\ try{\\ \\ const res = await fetch('/posts.json')\\ \\ if(!res.ok)throw new Error(`HTTP ${res.status}`)\\ \\ const data = await res.json()\\ \\ if(!cancelled){\\ \\ setArticles(data)\\ \\ }\\ \\ }catch(err){\\ \\ if(!cancelled){\\ \\ setError(err.message)\\ \\ }\\ \\ }finally{\\ \\ if(!cancelled){\\ \\ setIsLoading(false)\\ \\ }\\ \\ }\\ \\ }\\ \\ fetchPosts()\\ \\ // Cleanup function: Set cancelled to true on component unmount\\ \\ return()=>{ cancelled =true}\\ \\ },[])\\ \\ const categories = useMemo(()=>{\\ \\ return['All', ...new Set(articles.map(a => a.category))]\\ \\ },)\\ \\ const filteredArticles = useMemo(()=>{\\ \\ if(activeCategory ==='All')return articles\\ \\ return articles.filter(a => a.category=== activeCategory)\\ \\ },[articles, activeCategory])\\ \\ return(\\ \\