Originally published at mihail-gaberov.eu . Intro Some time ago, before ↪️ ↩️ ️️were officially released, I have written about them. It was an attempt to learn and explain this new feature. Now, when they are officially part of the last React , I have decided to revisit them and try to present better examples of their usage. React Hooks another article releases Why Right after my first , I’ve received some very useful comments by a colleague of mine. Comments regarding the presentation and the examples, and advice of how I can do better. I kept these comments in my email for some time. And today I will try to follow them, so we can get better understanding about this feature, which now can be used in any new or existing project. presentation Show Time Since we have covered the theory behind the hooks (and there are a lot of nice explanations on the subject out there now), I don’t plan to repeat it here. What I plan is to start directly with examples, but to strive to keep them as clear and focused as possible. 🐽 last time Example 1: In this example we will take a closer look at the two of the most important built-in hooks — useState and useEffect. 📌 State Hook — useState() 📚 Theory — this is just to remind us what is this hook meant to be used for and then we will see how to use it below. What say is: “ ”. This means that whenever we need to manipulate our component state, we can go for hook. React documentation one of the Hooks provided by React is called **_useState_** . We’re also sometimes going to refer to it as the “State Hook”. It lets us add local state to React function components **_useState_** 👉 Practice — you can see . live example here and play with it 📌 Effect Hook — useEffect() 📚 Theory — this is just to remind us what is this hook meant to be used for and then we will see how to use it below. What documentation say is: “ ”. This means that whenever we need to perform some side effect or use a result returned from such, we should go for hook. React The Effect Hook lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects **useEffect** Here is an example in which we will see what are the differences when we use this hook with . We also will see what happens if we provide a . one parameter and with two parameters return value for the first param 👉 Practice — you can see . live example here and play with it If you want to go really deeper into this, here Dan Abramov posted A Complete Guide to useEffect . It’s a really long article, but it’s worth it. Example 2 In this example we will take a closer look at the and how can we use one. custom hooks 📌 Custom Hook (e.g. usePictures) 📚 Theory as we remember from the , custom hooks are exactly what the name implies. Hooks that we can create by our own and we can use built-in hooks in them. In the example below, we will see how to create such and use it in combination with previously mentioned hooks. For instance, how can we fetch a 3rd party REST API and do something with the result. 💻 → last time Or simply said — our own functions that can benefit from React built-in hooks. 👉 Practice — you can see and the code for it . live example here here Conclusion In the end of this brief retrospection, we could refresh our memories by mentioning some of the key things we need to keep in mind, when using React Hooks. Hooks don’t remove classes — we still can use classes if we want or need them. Hooks rules — we must follow them when using hooks: ☙ — this basically means that we must not call hooks (yes, remember, hooks are functions and we can call them) inside loops, conditions and nested functions. And we must follow the order in which Hooks are called. Only Call Hooks at the Top Level Note that you don’t need to worry about this problem if you use the provided lint rule . ☙ — this means we are not suppose to call Hooks from regular functions. Instead, we should be calling them only from React function components or custom Hooks. Only Call Hooks from React Functions JavaScript 😏 I hope this article helps you feel more confident when using React Hooks. 🔥 Thanks for reading! 🔥
