title: React: fetch updated data from server without refresh
body: <p>Suppose my React component structure looks as follows:</p>
  <pre><code>App
  |-PostList
  |-CreatePost
  </code></pre>
  <p>In PostList component I populate my state by fetching data from a server like:</p>
  <pre class="lang-js prettyprint-override"><code>...
   const [posts, setPosts] = useState({});
    useEffect(() =&gt; {
      async function fetchPosts() {
        try {
          const res = await axios.get(`${BACKEND_API}/posts`)
          await setPosts(res.data)
        } catch (e) {
          console.log(e)
        }
      }
      fetchPosts()
    }, []);
  </code></pre>
  <p>And render those posts. Again, in my CreatePost component I create a new post and sent those data to the server like this:</p>
  <pre class="lang-js prettyprint-override"><code>...
    const [title, setTitle] = useState('');
    const submitHandler = async (e) =&gt; {
      e.preventDefault();
      await axios.post(`${BACKEND_API}/posts/create`, { title });
      setTitle('')
    };
  ...
  </code></pre>
  <p>Now there the problem arise. I can't see my new post without refreshing the page. I try to solve this problem like lifting state up in the App component and pass the <code>setPosts</code> handler to the CreatePost component. Because I was thinking to update my posts state again inside the <code>submitHandler</code> like this:</p>
  <pre class="lang-js prettyprint-override"><code>    async function refreshPosts(setPosts) {
        const res = await axios.get(`${BACKEND_API}/posts`)
        await setPosts(res.data)
      }
  </code></pre>
  <p>I was confused is it the corrent way? As I heard lifting state up is not a good decision. Is there any better solution? I was trying to avoid any state management lib. Which come with a lot of extra work for this simple problem.</p>