Getting Started Using Hooks with Phoenix and Liveview
Tags: tailwindcss, elixir, beam, phoenix
Published: 2022-07-04 12:58:05

# Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer

I am Gustavo and today's theme is: **Getting Started Using Hooks with Phoenix and Liveview**

**Do you want to learn Elixir in three months? https://elxpro.com/sell**

_ps: You can follow the article with **[VIDEO](https://youtu.be/HBPctPUDC3s)**

_Want to learn more about elixir on a Telegram channel?_
https://elxpro.com/subscribe-elxcrew



# What are Hooks with Liveview?

The hook is nothing more than a "hook", where you can send events to the server and vice versa.



# What is the Difference between Hooks and Liveview in everyday life?

The main difference is that hooks are a way to send and receive data from the frontend/backend to the browser using a javascript syntax with Elixir, it looks a lot like a LiveView page or nothing new. But the biggest difference is that on a day-to-day basis Liveview takes care of almost all this work, the Hook is a way where you need to manipulate the DOM for something very specific that using LiveView would be almost impossible. The most common example is to listen to the page and wait that when you reach the end, load new elements, Javascript gives you this very easy resource, the hook will help you send it to your server. Another example would be manipulating a map, accessing geolocation resources, BlueTooth, wifi among others only with the browser, and hooks will help you in these processes. While Liveview will be responsible for everyday work like CRUD, real-time, tables, notifications, backend, and common frontend interaction.



# Why is understanding Hooks important?

As I mentioned above, some events and access to Browser resources so that it is possible through Javascript and understanding about Hooks gives you the flexibility to work with Liveview and Elixir without losing functionality.



# What are the advantages of using Hooks?

In my experience, the main advantage is access to computer resources such as Geolocation, Bluetooth, wifi... among others and you can check with the images below.


## Geolocation
https://www.w3schools.com/html/html5_geolocation.asp

```
console.log(navigator)

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4io3dvz4yo7q50lpaqjq.png)
 

# Where to start?

The first step is always to understand when there is a need for the hook, understanding the need and LiveView cannot supply, start with a hook [see documentation](https://hexdocs.pm/phoenix_live_view/js-interop.html #client- hooks-via-phx-hook)


## Determine the main elements of a Hook

The main elements of a hook are _id_ and _phx-hook="HookName"_ as shown in the image below:

```
<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " />

<div id="mirror"></div>
```

After the definition you will receive the first error in your browser as follows:

![Image Description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/git4b8orgiwpp3vp7lf3.png)




## Create a folder structure for hooks and Create your hook

In _assets/js/app.js_ create a possibility to access hooks. The ideal is always separate hooks in dough as they can make a mess.

![Image Description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qf37azi8z3tbnigb2j5.png)

After defining the hooks file call, and creating a file to always point the hooks as you can see the image, in the **hooks folder** create hooks. See the image below.


![Image Description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk2sj1irkatvoybopbhn.png)
 

And now create the hook as defined in **input** as **MirrorValues** and now and call the Js class,


![Image Description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic6mfg50djrsv2v43jc4.png)
  
What was created is simply a function with the name of the Hook, where **mounted** was executed when our element was added to our screen.

And what our hook does is nothing less than simply taking the input data and including it in a **div.mirror** tag

  

# Is there any exception where Hooks is not good?
When starting to replace Liveview heavy lifting is not indicated.



# Wrap up:

I hope you enjoyed this article and it helped you to know when/not to use hooks :D


Social networks:

- [Gustavo Oliveira](https://www.linkedin.com/in/gustavo-oliveira-642b23aa/)
- [Elxpro(linkedin)](https://www.linkedin.com/company/36977430)
- [Twitter](https://twitter.com/elx_pro)
- [Elxpro](https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ)