what's the difference between getDerivedStateFromError and componentDidCatch

Question

What I understood from here:

componentDidCatch:

• is called always in the browser
• is called during the \"commit phase\" when the DO

Answer 1

Actually, Both of them have the same goal but in a different phase, definitely, for writing ErrorBoundary component I use the getDerivedStateFromError method because I obey the ReactJs Docs. the doc has this sentence:

Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown. Use componentDidCatch() to log error information.

Surely, it has some reasons so for rendering fallback UI I always use getDerivedStateFromError and for catching information and do something I use componentDidCatch.