Stop using React hooks for every things

Okay, this may sounds a little weird from a front-end web developper specialized in React but trust me, I'm sure this is a really valid point.

When you learn React, you want to do every things in React. It's like your new toy, you want to discover it, you want to master it. Later when you gain some experience and if you manage to have a better overview you may realize that when you can it's better to write pure native html / css code.

A bit of explanation if your are not familiar with React : React hooks are built-in functions that let you use state, lifecycle features, and other React capabilities inside functional components.
The most common ones are useState, useEffect, useContext, and useRef. They're incredibly useful — but also often overused for things that could be done with plain HTML, CSS, or browser APIs.

To be more concrete, I'll give you three examples : native popover, handle forms and display or hide things in a list.

Native popover

There is a recent API Popover that lets you use universal attributes to designate an element and display it above the rest of the content.
So rather than having a state and function to display and hide that popover you can use this new API and just write :

I remember the first time I heard about this, I really wanted this new API to be well support on every browser and when I used it for the first it was a relief not to have to create a custom solution, I was like : "Oh yeah finaly we can do something with pure native html code".

Next time you'll want to make a popover component I can only invite you to give it a try.

Handle forms

Handling forms is like one of the most common thing in web development, and some times I have the feeling that we over complicate things.

Like for a basic login or registration form maybe you'll use some state to control input user email and password, you would create a function with a regex to check password or email format, you would make a hook to handle all of this and make the api call but a lot of this things can be handle with pure html code, and I have the feeling that we are forgeting that on the road to learn React.

And that's it, just with that you form is working. This example is very basic but it's to show that for a not too complicated form without much security you can use pure html.

Display and hide things in a list

There is something very powerfull in css that you can use to hide or display things in a list (rather than using a state), this thing is called : :has().
This is a pseudo-class that let's you style an element based on its descendants or state of its children. it's like a "parent selector" that allows CSS to say, "Style this element if it contains something specific."

So for example you can use it to display or hide things based on a checkbox.

One of the great thing about this solution is performance : there is no need for a DOM and Virtual DOM reconciliation because there is no props change. It's so fast, the response time is instantaneous.

Sometimes native is not enough

Of course sometimes you can't only use pure html / css code because the feature you are making is too complicated or you customer want a very specific behavior that you can't do with pure html / css code.

So my point is to make you take a step backward, get a better overview and ask yourself if the feature you are developping need so much specific React functions or can you make it with basic and universal code ?

You need to think about performance and optimization so that's why I ask myself for each feature, what is the best option and If I can use pure html / css, that's what I do.

Thanks for reading this first post and feel free to share your thoughts and opinions about this topic !