You might not need an effect

export default function ProfilePage({ userId }) {  
	const [comment, setComment] = useState('');  
	
	useEffect(() => {  
		setComment('');  
	}, [userId]);  
}

export default function ProfilePage({ userId }) {  
	return (  
		<Profile  
			userId={userId}  
			key={userId}  
		/>  
	); 
}  

function Profile({ userId }) {  
	// ✅ 이 state 및 아래의 다른 state는 key 변경 시 자동으로 재설정됩니다.  
	const [comment, setComment] = useState('');  
	// ...  
}

function List({ items }) {  
	const [isReverse, setIsReverse] = useState(false);  
	const [selection, setSelection] = useState(null);  
	
	// 🔴 피하세요: Effect에서 prop 변경 시 state 조정하기  
	useEffect(() => {  
		setSelection(null);  
	}, [items]);  
	// ...  
}

function List({ items }) {  
	const [isReverse, setIsReverse] = useState(false);  
	const [selection, setSelection] = useState(null);  
		
	// 더 좋습니다: 렌더링 중 state 조정  
	const [prevItems, setPrevItems] = useState(items);  
	if (items !== prevItems) {  
		setPrevItems(items);  
		setSelection(null);  
	}  
	// ...  

}

function List({ items }) {  
	const [isReverse, setIsReverse] = useState(false);  
	const [selectedId, setSelectedId] = useState(null);  
	
	// ✅ 최고예요: 렌더링 중에 모든 것을 계산  
	const selection = items.find(item => item.id === selectedId) ?? null;  
	// ...  
}

function ProductPage({ product, addToCart }) {  
	// 🔴 피하세요: Effect 내부의 이벤트별 로직  
	useEffect(() => {  
		if (product.isInCart) {  
			showNotification(`Added ${product.name} to the shopping cart!`);  
		}  
	}, [product]);  
	
	function handleBuyClick() {  
		addToCart(product);  
	}  
	
	function handleCheckoutClick() {  
		addToCart(product);  
		navigateTo('/checkout');  
	}  
	// ...  
}

function ProductPage({ product, addToCart }) {  
	// ✅ 좋습니다: 이벤트 핸들러에서 이벤트별 로직이 호출됩니다.  
	function buyProduct() {  
		addToCart(product);  
		showNotification(`Added ${product.name} to the shopping cart!`);  
	}  

	function handleBuyClick() {  
		buyProduct();  
	}  
	
	function handleCheckoutClick() {  
		buyProduct(product);  
		navigateTo('/checkout');  
	}  
	// ...  
}

function Form() {  
	const [firstName, setFirstName] = useState('');  
	const [lastName, setLastName] = useState('');  
	
	// ✅ 좋습니다: 컴포넌트가 표시되었으므로 이 로직이 실행되어야 합니다.  
	useEffect(() => {  
		post('/analytics/event', { eventName: 'visit_form' });  
	}, []);  
	
	
	// 🔴 피하세요: Effect 내부의 이벤트별 로직  
	const [jsonToSubmit, setJsonToSubmit] = useState(null);  
	
	useEffect(() => {  
		if (jsonToSubmit !== null) {  
			post('/api/register', jsonToSubmit);  
		}  
	}, [jsonToSubmit]);  
	
	function handleSubmit(e) {  
		e.preventDefault();  
		setJsonToSubmit({ firstName, lastName });  
	}  
	// ...  
}

function App() {  
	// 🔴 피하세요: 한 번만 실행되어야 하는 로직이 포함된 Effect  
	useEffect(() => {  
		loadDataFromLocalStorage();  
		checkAuthToken();  
	}, []);  
	// ...  
}

let didInit = false;  

function App() {  
	useEffect(() => {  
		if (!didInit) {  
			didInit = true;  
			// ✅ 앱 로드당 한 번만 실행  
			loadDataFromLocalStorage();  
			checkAuthToken();  
		}  
	}, []);  
	// ...  
}

if (typeof window !== 'undefined') { // 브라우저에서 실행 중인지 확인합니다.  
	// ✅ 앱 로드당 한 번만 실행  
	checkAuthToken();  
	loadDataFromLocalStorage();  
}  

function App() {  
	// ...  
}

function Parent() {  
	const [data, setData] = useState(null);  
	// ...  
	return <Child onFetched={setData} />;  
}  

function Child({ onFetched }) {  
	const data = useSomeAPI();  
	// 🔴 피하세요: Effect에서 부모에게 데이터 전달하기  
	useEffect(() => {  
		if (data) {  
			onFetched(data);  
		}  
	}, [onFetched, data]);  
	// ...  
}

function Parent() {  
	const data = useSomeAPI();  
	// ...  
	// ✅ 좋습니다: 자식에서 데이터를 전달  
	return <Child data={data} />;  
}  

	function Child({ data }) {  
	// ...  
}

function useOnlineStatus() {  
	// 이상적이지 않습니다: Effect에서 저장소를 수동으로 구독  
	const [isOnline, setIsOnline] = useState(true);  
	useEffect(() => {  
		function updateState() {  
			setIsOnline(navigator.onLine);  
		}  
		  
		updateState();  
		  
		window.addEventListener('online', updateState);  
		window.addEventListener('offline', updateState);  
		
		return () => {  
			window.removeEventListener('online', updateState);  
			window.removeEventListener('offline', updateState);  
		};  
	}, []);  
	return isOnline;  
}  

function ChatIndicator() {  
	const isOnline = useOnlineStatus();  
	// ...  
}

function subscribe(callback) {  
	window.addEventListener('online', callback);  
	window.addEventListener('offline', callback);  
	
	return () => {  
		window.removeEventListener('online', callback);  
		window.removeEventListener('offline', callback);  
	};  
}  

function useOnlineStatus() {  
	// ✅ 좋습니다: 내장 Hook으로 외부 스토어 구독하기  
	return useSyncExternalStore(  
		subscribe, // 동일한 함수를 전달하는 한 React는 다시 구독하지 않습니다.  
		() => navigator.onLine, // 클라이언트에서 값을 얻는 방법  
		() => true // 서버에서 값을 얻는 방법  
	);  
}  

function ChatIndicator() {  
	const isOnline = useOnlineStatus();  
	// ...  
}