Are React Hooks Slower than Class Components?

React Hooks are not slower than Class Components.

----

----

----

----
Follow Me Online Here:

#benawad
​
----
#benawad

[DrPanesar]

Hi Ben. I’m not sure about useReducer. Feels complex and more boiler plate than straight forward classes and pure components. What do you think? Doesn’t feel like a simplification to me so far....

[victorpc]

you could use:
useCallback(text => setTodos(todos => [{ text, complete: false }, ...todos ])), [ ]);

way simplier no useReducer required, you only use useReducer when you have multiple states that relate to one another.

[shunkongcheung]

const onSubmit = useCallback(text => setTodos(todos => [{text, complete:false}, ...todos], []);

[TheKNinja]

Hooks appear interesting and we will have to wait a bit for the api to stabilize and new libs and codestyles to emerge. I think that the react team is pushing hard for more functional approach, but it looks confusing and feels like a glue code. I don't see anything wrong with classes, even if a SFC needs to be converted to stateful or pure component. Keep up the good work Ben.

[BartekKozera]

Ok but with your solution, Form component is now coupled with your reducer - it no longer exposes the onSubmit callback. You could add a wrapper around but wasn't the point of hooks to prevent adding more components to tree?

[omri]

It seems cool that you can do all of these stuff without a class, but it's so much harder.

[aidanprehot]

you mentioned a custom function with rerender logic as the second argument for the memo HOC, what would be an example of some logic that you could place there to calculate if a re-render should happen? I tried comparing the memo'd component's state with the next props but state isnt in scope.

[jochenpanjaer]

Wow, they have greatly increased the complexity and decreased the readability of React.
I still prefer my class-based components with an obvious lifecycle, thank you very much.

[shrey]

When I saw the actual useReducer function I was like I'm done here, bye

[serafim]

Hi ! What extension do you use to show size of import files ?

[codebro]

Thanks, this video answered a lot of questions I had when I first heard about how hooks work.

[igoldny]

you get those updates coz clicking on that element causing mutation to your todos.
another options to fix this issue is: immutable data lib, manage your keys right and moving todos from the top lvl component to low as possible.

[szeredaiakos]

But react hooks advertises of needing less code ... but you have to use useCallback && shouldComponentUpdate in order to have your app not to crawl to a halt after 20 or so components mounted?
Right. Thx for the info, it makes it really easy to make a decision.

[auditusich]

I'll just leave it here ))

export default React.memo(Item);

[andresmontoya]

Interesting! You should compare useReducer and redux :) how that method can replace redux, no?

[julianklumpers]

Looks like alot of code and boilerplate then just use a purecomonent. Why would you prefer this over class based components? Keep up the good work!

[windresta]

Many claims themselves "devs" love to work with this "high" readablility syntax, and now, finally, performance issues stop me from using hooks.
I suggest all of you to ensure what you are doing before running into this foolish trend.
Performance issues come from hook itself, and calling another hook inside to solve it?? What a best practice ever in this field...

[saimanish]

easier way is to send the todos.length as props and wrap the Form with React.memo() and in the 2nd argument of memo() check if prevprops.todosLength=== props.todosLength

[WaterJay]

still dont know exact the use case of useLayoutEffect, useMutationEffect, useImperativeMethods etc

[milansingh]

Awesome Awesome example stuff from Ben👍