Using React Hooks : Understanding React UseEffect and creating custom Hooks

[supazuko]

Using React Hooks : Understanding React.useEffect

React Hooks are special functions that allow you to “hook into” React features without the need for classes. The React hook APIs provide an alternative to writing class-based components (hooks do not work inside classes). Operations like data fetching or manually changing the DOM via React components can cause side effects or “effects” as they are known, because they can affect other components and cannot be done during rendering.

React comes with in-built hooks like useEffect that allow you to perform side effects from a function component. With the effect hook we can achieve the same purpose as the React classes: componentDidMount, componentWillUnmount and componentDidUpdate all together in one function.

Key takeaways:

By the end of this tutorial, the reader will be able to understand:

• What React hooks are and their benefits.
• What useEffect does.
• Rules for using useEffect.
• How to call APIs with useEffect and process responses.
• How to use React.useEffect to “clean up” effects (or “after effects” as I call them) by returning a function.

References:

• https://reactjs.org/blog/2019/02/06/react-v16.8.0.html
• https://www.youtube.com/watch?v=gv9ugDJ1ynU
• https://dmitripavlutin.com/react-useeffect-explanation/
• https://daveceddia.com/useeffect-hook-examples/
• https://blog.logrocket.com/guide-to-react-useeffect-hook/
• https://reactjs.org/docs/hooks-reference.html#useeffecthttps://reactjs.org/docs/hooks-effect.html

[hectorkambow]

Good afternoon and thank you for submitting your article for publishing. Your article has been entered into our queue and should be reviewed (and published pending any changes) as soon as a peer reviewer is finished with the ones in the queue before it. 🚀 Thank you.

[hectorkambow]

@supazuko

We're really looking for unique/original content, and based on the content provided, it seems that information that you intend to cover is already readily available through the documentation or via many other blog sites.

Could you please expand upon how your content will differ from what is already available through other websites and documentation? We lean towards content that offers an original viewpoint/approach around programming-centric topics.

[supazuko]

My tutorial will help react beginners understand the usefulness of the useEffect hook in react, more especially how to fetch data from API calls - synchronously and asynchronously, how to process received data and display said data.

Also, I'll guide the readers on the various use cases of the custom react hooks. This will be demonstrated through the application(s) we'll build to illustrate the real-life use-cases.

I'll also guide the readers on what to consider when creating custom hooks and how to make it fit into their various projects, and the technique of cleaning up the side effects of react hooks when appropriate and when to consider cleaning up.

Not a lot of articles out there are as comprehensive as what I plan to cover in this tutorial.

[ahmadmardeni1]

Sounds like a helpful topic - let's please be sure it adds value beyond what is in any official docs and/or what is covered in other blog sites. (the articles should go beyond a basic explanation - and it is always best to reference any EngEd article and build upon it). @supazuko

Please be attentive to grammar/readability and make sure that you put your article through a thorough editing review prior to submitting it for final approval. (There are some great free tools that we reference in EngEd resources.) ANY ARTICLE SUBMITTED WITH GLARING ERRORS WILL BE IMMEDIATELY CLOSED.

Please be sure to double-check that it does not overlap with any existing EngEd articles, articles on other blog sites, or any incoming EngEd topic suggestions (if you haven't already) to avoid any potential article closure, please reference any relevant EngEd articles in yours. - Approved