2021-06-23
1094
#react
Paul Cowan
55900
Jun 23, 2021 â‹… 3 min read

React Hooks: The good, the bad, and the ugly

Paul Cowan Contract software developer.

Recent posts:

how and when to use JavaScript arrow functions

How and when to use JavaScript arrow functions

Arrow functions have a simpler syntax than standard functions, and there are some important differences in how they behave.

Joe Attardi
Feb 17, 2025 â‹… 5 min read
javascript is null or empty function

How to check for null, undefined, or empty values in JavaScript

In most languages, we only have to cater to null. But in JavaScript, we have to cater to both null and undefined. How do we do that?

Lewis Cianci
Feb 14, 2025 â‹… 4 min read
MERN Stack: Overview With Examples

What is the MERN stack? Overview with examples

Discover how the MERN stack (MongoDB, Express.js, React, Node.js) enables developers to build dynamic, performant, modern websites and apps.

Nefe Emadamerho-Atori
Feb 13, 2025 â‹… 20 min read
Leveraging Parallel Computing In Node.js

Leveraging parallel computing in Node.js

Use parallel computing in Node.js with worker threads to optimize performance, handle CPU-intensive tasks, and utilize multi-core processors.

David Omotayo
Feb 13, 2025 â‹… 8 min read
View all posts

One Reply to "React Hooks: The good, the bad, and the ugly"

  1. I’ve found useState() to be nerve wracking and strange. It gives me more of what I don’t need, and the whole Hooks framework takes away things that I depend upon.

    I depend on the ‘this’ object in class components. The object is created when the component is first used, and stays in existence until it vaporizes. I put a lot of intermediate and calculated variables in it. I also have references to important data structures in it. You could call these ‘state’, except really they never change, or rarely change, or, somehow, labeling them ‘state’ just doesn’t seem right.

    Say I’ve got some state, in this.state. When these variables change, I need to go thru a lot of calculations to form data structures that render() can use to draw with. render() also happens when props change, but no recalculating needs to be done then. Where do I keep those intermediate data structures? Just toss them and recalculate every time there’s a render? I store them on ‘this’.

    I have references to large data structures that are shared among half a dozen or more other components. Many components all have a reference to some of those data structures for easy access while the software is running. This is why I like a ‘this’ object – I can set those references and not have to rebuild my network of references every render, reaching thru this object to get the reference to the other object, from which I get another object I need. Do I throw all this info into a cave in the hopes that next time this instance of this component is called, it’ll return to me the exact same instances I threw into the cave?

    All this goes way beyond the little toy examples I see for hooks. I have interdependencies between data in components that aren’t conveniently nested inside each other. You type in different numbers here, and the graphics over there changes. I have WebGL graphics that don’t redraw with the rest of the DOM, and cross-frame communication with other iframes.

Leave a Reply