Menu
I've been looking into writing my own React hooks but so far am struggling to tell on a technical level what the difference is between a normal JavaScript function and a hook.
For example, this article says hooks are "normal JavaScript functions which can use other hooks inside of it", but what else is going on under the hood?
I know that we use the word use in the hook name, but I'm curious what it is about hooks that make them hooks and not functions!
874
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes — they let you use React without classes. (We don't recommend rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.)
Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders.
Hooks are JavaScript functions that manage the state's behaviour and side effects by isolating them from a component. So, we can now isolate all the stateful logic in hooks and use (compose them, as hooks are functions, too) into the components.
Hooks make React so much better because you have simpler code that implements similar functionalities faster and more effectively. You can also implement React state and lifecycle methods without writing classes.
React hooks are not in any way introduced to be different from JavaScript functions. They are introduced to give the power of class components to functional components. For example, you cannot have any sort of local state management inside a functional component, you'd have to convert it into a class component if you are in need to introduce state.
This means you don’t have to learn or use hooks right away, and there will be no breaking changes when adding or refactoring your classes. Hooks allow you to use local state and other React features without writing a class. Hooks are special functions that let you “hook onto” React state and lifecycle features inside function components.
But comparing the two is tricky because React is a JavaScript library – it takes the existing code for JavaScript and makes it more powerful in a specific way. So, on one hand, there wouldn’t realistically be a React without JavaScript – but on the other hand, JavaScript out-of-the-box isn’t capable of doing what React can do.
Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.) We provide a linter plugin to enforce these rules automatically. We understand these rules might seem limiting or confusing at first, but they are essential to making Hooks work well.
what it is about hooks that make them hooks and not functions!
Hooks are functions. What's special about them is what their purpose is and when they're supposed to be used. Their purpose is to give you a way to interact with the react component lifecycle, and they are implemented so that they work correctly only if they are called while a functional component is rendering.
The react team has implemented 10 of these functions. They let you do things like manage state or run side effects. You can mix and match these any way you like, and if you put the code into a helper method, this is referred to as a "custom hook".
95
React hooks are not in any way introduced to be different from JavaScript functions. They are introduced to give the power of class components to functional components.
For example, you cannot have any sort of local state management inside a functional component, you'd have to convert it into a class component if you are in need to introduce state. Now with the introduction of hooks, you can use useState to give functional component the power of class component's state management.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
