What is a Custom Hook?
How to create amazing programming interfaces
How do you imagine the communication between the view and the logic? The view need to draw elements for user, It is responsible to catch user’s interaction and display data. On the other hand, the logic is responsible to request, generate and process the data, and save it for future access. In React, we can put States and detect its changes by Effects, throughout this two Hooks, we can handle a store-action app. But, we can also create our own Hooks. Custom Hook is in fact a single function, prefixed by the word “use”, for example “useTable” or “usePayment”. This hooks allows to encapsulate and abstract complex operations, into a functional and linear code.
To make a hook, we need to understand that a custom hook is an extension for other hooks, and it is intended to expose a CUSTOM PROGRAMMING INTERFACE. In this article, we will learn about this concept.
Functions and Results
Function is like a black-box that do something with input and throw some output. Similar to a crushing machine. The machine takes something and crushes it into a result (maybe a bin block). Using functions allows solve tasks without the complex understanding about details. Imagine fetch data from server and have to remember whole process every time.
When we make a custom function, we are free to return any result. This result is called “the programming interface” or maybe “the programming layout”. The idea is return the states and actions necessary to create a dialog between the black-box (the function inside) and the external code. Like a window.
The function is the black-box that exposes a programming interface to brings data throughout complex logic to simplify logic.
Custom Hook
A Custom Hook is in fact this. A window-programming-interface to expose states and actions and simplify the code. Let’s see an example.
In the next code, we define a hook, called “useCounter”. It exposes the “count” value so far (state of current counting). And receive some actions like “reset with some value”, “increment by one”, “decrement by one”, “add some value” and “substract some value”. This programming interface is exposed to any component and always do the same thing.
useCounter — Create a counter and increment or decrement it by actions.
Any component that “use” this custom hook, it will able to get the current counting value and change the value throughout the defined actions.
This kind of programming-interface allows to handle data in a secure-way.
This is the live result.
Conclusions
Undestand about the nature of custom hooks provides us a powerful mental tool to divide complex problems into a simplified linear code. Across the programming interfaces we can take problems and solve it giving to the developers a useful way to handle the complex logic. For intance, if we need to create a counter in some component, we don’t have to remember all the logic inside this problem, only we need to remember the few pieces of code to use the custom hook that resolve the task.
Therefore, if we need to use a table, pagination, column filters and so, we can use “useTable” hook, this hook solves our ploblems by an unknown complex process, and we only remember take states and actions exposed, like “rows”, “columns”, “data”, “page”, “pageSize”, “sortColumn”, “selectRow”, and so.
It’s very important that every developer learn to use this concept. Because, this is a mighty tool, it’s the sword and the shield to hunt and kill demons and dragons.
Custom hooks are a pattern design.
