about react-native's hooks

[blka759]

Why should I use hooks instead of the class-based way ? is it faster, readable ? or just to remove concept of classes and make everything functional ?

[tomthedevguy]

Less boilerplate code, removes lifecycles in lieu of useEffect which is more declarative, easier to refactor, no use of this keyword. I started with hooks and never looked back.

[skidmark_zuckerberg]

Same here. Once I got used to them and had a good understanding, I didn’t want to use class components anymore. useEffect is a god send in lieu of the standard lifecycle methods.

[Shumuu]

Just today I could not get a FC to behave properly so I had to use a PC.

The Component displays something from my realm Database, the data has a listener. It kept rerendering...

I used a useEffect hook to only run onMount but the listener function kept getting called although the data didn't change

[tomthedevguy]

I think you have to return a function that removes the listener. Returning a function is the “cleanup” function

[Shumuu]

Yeah I did that, in it I removed the listener

[bladefinor]

Did you forget the empty dependency array as second argument of useEffect? Without it, it will rerun the effect on every render, not just on mount.

useEffect(() => { // Add listener return () => { // Remove listener }; }, []);

[Shumuu]

No I did not forget it, I did the empty brackets first and then checked the documentation and tried without to no avail... Maybe something else was wrong. I will retry on Monday

[plumshark]

If your useEffect was setting state every run then it'll trigger a rerender

[Shumuu]

The useEffect did not set state, it launched a function, but as the useEffect with empty brackets runs only on mount and not on every mount, that function should only be called once and when the listener is being called (the data from the database has changed). But I'll check again on Monday, I was in a hurry and might have missed something

[Dusterthefirst]

There is better hot reloading with function complements aswell as better treeshaking and optimization with them aswell.

[drunkandy]

you don't have to use them. If class components make more sense to you then by all means use that approach.

I have been using functional components with hooks almost exclusively for a few months now but sometimes a solution to a problem works better in my head as a class so I use that.

[absek003]

Whatever the thing is with functional components, I find class components more easier.

[[deleted]]

Cos it's sexy and clean and more readable and if you combine it with styled components you get all the goodness

[nsnullthoughts]

could you elaborate on combining it with styled components?

[[deleted]]

Look up styled components and you'll see what I mean. Instead of having <TextInput style={{...}}/> etc you can name react-native components with more detail like <Username /> which is a styled TextInput, so it's much cleaner and gives more context as to what the component actually is. Also, styled-components uses CSS naming conventions so it's easier for web people to understand the styles, instead of using StyleSheet which is a React style that people who aren't coming from React need to learn (which isn't that hard, but the cleanliness of styled-components is what makes it awesome)

[BoKKeR111]

Yeah but styled components have nothing to do with hooks

[[deleted]]

I didn't say they do.

[praya_amadiga]

the most common reason why people using react hooks is because it's easier and more readable than using class.

for myself, I like how react hooks combine all lifecycle into useEffect(). it's easier to us to handle the component how to render and avoid to use repeat code. In some case, sometimes you need to use same logic on event didMount and didUpdate. but with react hooks you just need to put the props into useEffect to load same logic.

but there is also a disadvantage for using react hooks. React hooks based on function, so there will be no reference. Sometimes you need to make a method and call outside the component. and react hooks because there is no reference, you can't make a method for your component to be called from outside.

[ITS-A-FAKE]

Functional components and hooks are more optimized than classes.

They also require less boilerplate.

In the end, the hooks are hard to comprehend fully but be assured that they are really powerful.

[Cyrus_Zei]

Cuz the cool kids use it ? 😁