# Comparation



<table><thead><tr><th>Class Component</th><th>Function Component</th></tr></thead><tbody><tr><td>constructor</td><td>Function components don’t need a constructor. You can initialize the state in the <a href="https://legacy.reactjs.org/docs/hooks-reference.html#usestate"><code>useState</code></a> call. If computing the initial state is expensive, you can pass a function to <code>useState</code>.</td></tr><tr><td>getDerivedStateFromProps</td><td>Schedule an update <a href="https://legacy.reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops">while rendering</a> instead.</td></tr><tr><td>shouldComponentUpdate</td><td>See <code>React.memo</code> <a href="https://legacy.reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate">below</a>.</td></tr><tr><td>render</td><td>This is the function component body itself.</td></tr><tr><td>componentDidMount</td><td><pre class="language-javascript"><code class="lang-javascript">useEffect(() => {
  // Your code here
}, []);
</code></pre></td></tr><tr><td>componentDidUpdate</td><td><pre class="language-javascript"><code class="lang-javascript">useEffect(() => {
  // Your code here
}, [yourDependency]);
</code></pre></td></tr><tr><td>componentWillUnmount</td><td><pre class="language-javascript"><code class="lang-javascript">useEffect(() => {
  // componentWillUnmount
  return () => {
     // Your code here
  }
}, [yourDependency]);
</code></pre></td></tr><tr><td>getSnapshotBeforeUpdate</td><td>There are no Hook equivalents for this method yet, but they will be added soon.</td></tr><tr><td>componentDidCatch</td><td>There are no Hook equivalents for this method yet, but they will be added soon.</td></tr><tr><td>getDerivedStateFromError</td><td>There are no Hook equivalents for this method yet, but they will be added soon.</td></tr></tbody></table>
