React.js is a front-end Library of JavaScript which is Opensource that supports a feature called Virtual DOM, which is not that different from the real DOM, its just a kinda another DOM in the Browser itself. Making it more interactive to built and user friendly, basically its just divided in Components based architecture that helps in isolate the code and reuse whenever required.
Hooks are are the Special feature of react as introduced after 16.8 version making it more accessible to user/dev as the functions are predefined in react itself that have the primary role
Before You Learn About Hooks...
Before you think of hooks, think of plain-old (aka vanilla) JavaScript functions.
In Js, functions are reusable code logic to perform repeated tasks. Functions are composable.
Let take an example that some-function() function composes (uses) functions a() and b(). The b() function uses the function c(). so its composable regarding the feature of Js
Components are basically State-full(locally stored) State-less(- a pure function & not stored locally and with side-effects) so removing the side effects and stateful (isolating) we have the stateless component with stateful logic , so here comes react in picture So, we can now isolate all the stateful logic in hooks and use (compose them, as hooks are functions, too) into the components.
Now the Crises of Stateful logic ? here its any thing that is used to declare and manage a function , Now that we have a blur picture of Components , state-Full and State-less , and there logic we can understand the react Hooks as
Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)rather than forcing a split based on lifecycle methods. You may also opt into managing the component’s local state with a reducer to make it more predictable.
- useState: To manage states. Returns a stateful value and an updater function to update it.
- useEffect: To manage side-effects like API calls, subscriptions, timers, mutations, and more.
- useContext: To return the current value for a context.
- useReducer: A useState alternative to help with complex state management.
- useCallback: It returns a memorized version of a callback to help a child component not re-render unnecessarily.
- useMemo: It returns a memorized value that helps in performance optimizations.
- useRef: It returns a ref object with a .current property. The ref object is mutable. It is mainly used to access a child component imperatively.
- useLayoutEffect: It fires at the end of all DOM mutations. It's best to use useEffect as much as possible over this one as the useLayoutEffect fires synchronously.
- useDebugValue: Helps to display a label in React Dev Tools for custom hooks.
if we see clearly that use is used frequently yes it is the Standard practice to identify the hooks in reacts
For more understanding let me know
Top comments (0)