Function App

exercises/02.side-effects/02.problem.cleanup/index.tsx:11–93

()

}

function App() {
	const [query, setQuery] = useState(getQueryParam)

	const words = query.split(' ')

	const dogChecked = words.includes('dog')
	const catChecked = words.includes('cat')
	const caterpillarChecked = words.includes('caterpillar')

	useEffect(() => {
		// 🚨 we use this to test whether your cleanup is working
		const hugeData = new Array(1_000_000).fill(
			new Array(1_000_000).fill('🐶🐱🐛'),
		)

		// 🐨 extract your event handler here into a function called updateQuery
		window.addEventListener('popstate', () => {
			// 🚨 this console.log forces the hugeData to hang around as long as the event listener is active
			console.log(hugeData)

			console.log('popstate event listener called')
			setQuery(getQueryParam())
		})
		// 🐨 return a function which removes the popstate event listener
		// 📜 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
	}, [])

	function handleCheck(tag: string, checked: boolean) {
		const newWords = checked ? [...words, tag] : words.filter((w) => w !== tag)
		setQuery(newWords.filter(Boolean).join(' ').trim())
	}

	return (
		<div className="app">
			<form
				action={() => {
					setGlobalSearchParams({ query })
				}}
			>
				<div>
					<label htmlFor="searchInput">Search:</label>
					<input
						id="searchInput"
						name="query"
						type="search"
						value={query}
						onChange={(e) => setQuery(e.currentTarget.value)}
					/>
				</div>
				<div>
					<label>
						<input
							type="checkbox"
							checked={dogChecked}
							onChange={(e) => handleCheck('dog', e.currentTarget.checked)}
						/>{' '}
						🐶 dog
					</label>