Use a better example for Effect hook

The following example is used in:

• https://reactjs.org/docs/hooks-overview.html#effect-hook
• https://reactjs.org/docs/hooks-effect.html

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

This example creates confusion because the example doesn't actually need useEffect to operate correctly.

If you set document.title outside of the useEffect, the app behaves exactly the same.

Suggested changes

• Use an example which would not work correctly if it wasn't placed in a useEffect. It should be something that depends on the DOM having been updated. Maybe setting the document.title to a document.getElementById or something like that. This would also be a contrived/useless example. Something practical would be better.

• Show the lifecycle of useEffect early. I was most interested in the lifecycle of when this method is called. In Dan's recent blog post on effects, this is the first thing that is covered, and it should be the same for these docs.

Bắt đầu với các ví dụ về Effect Hook trong hooks-overview.html#effect-hook và hooks-effect.html, sau đó so sánh ví dụ hiện tại với phần thảo luận về vòng đời trong tài liệu được tham chiếu. Thay thế ví dụ gây khó hiểu bằng một ví dụ minh họa vì sao cần useEffect và giới thiệu vòng đời của nó sớm hơn; được xem là hoàn tất khi cả hai trang đều giải thích nhất quán về hành vi và hiển thị ví dụ đã cải thiện.