React Hooks — First Baby Step as a newbie
Hooks came up with React version 16.8. In React Hooks you can simply use state and other React features and existing components without writing a class. Another fascinating fact about Hooks is the code reusability. Reading others’ codes is one of the best ways a newbie can learn coding. But it is not always easy as we expect. Classes make code readability more complex and even the intermediates struggle with this. Using Hooks is a smart solution for this struggle. It doubles the code readability. But if you can not find a logical reason to use Hooks in your code, then do not go for that.
Why React team introduced Hooks?
Though React was able to become one of the best web development technologies among web developers, it had a handful of problems that can make developers’ lives tough. Some of those problems are,
- Difficulty to reuse stateful logic between components.
- Understanding the Classes, How they behave and When to use them are confusing even for experienced React developers.
- Some complex components are difficult to understand.
To address those problems React team introduced Hooks.
Moreover,
Developers can use Hooks with some components without rewriting existing codes.
Breaking changes free.
Rules of Hooks
Developers should follow two rules when they are working with React Hooks.
- Hooks should call at the top level of the React functional components(not inside loops, conditions, or nested functions)
- Hooks should call either from React functional components or from React custom Hooks. ( Don’t call Hooks from JavaScript functions )
Types of Hooks
Two main types are available in React Hooks.
Built-in Hooks and Custom Hooks.
Built-in Hooks
In simple, built-in Hooks are types of Hooks that are developed by React team. Built-in Hooks also divide into two main categories, Basic Hooks and Additional Hooks.
Basic Hooks
Basic Hooks are common Hooks that are essential to the developers when working with React Hooks.
- useState
- useEffect
- useContext
Additional Hooks
- useReducer
- useRef
- useMemo
- useDebugValue
- useLayoutEffect
- useCallback
- useImperativeHandle
Custom Hooks
The developers can create customized Hooks using the “use” as the top part of the Hook’s name. ( useImage, useSubmitButton ) Custom Hook is a JavaScript function that follows the Rules of Hooks.
That’s all for this article. I hope this would be helpful to you as React Hooks newbies.
Thank you!!!
