2019-11-20
1829
#react
Ohans Emmanuel
10093
Nov 20, 2019 ⋅ 6 min read

How is getSnapshotBeforeUpdate implemented with Hooks?

Ohans Emmanuel Visit me at ohansemmanuel.com to learn more about what I do!

Recent posts:

Enhancing Two-Way Data Binding In Angular

Enhancing two-way data binding in Angular

Angular’s two-way data binding has evolved with signals, offering improved performance, simpler syntax, and better type inference.

Alexander Godwin
Nov 14, 2024 ⋅ 6 min read
Hand holding purple sticky notes for CSS sticky positioning guide.

Troubleshooting CSS sticky positioning

Fix sticky positioning issues in CSS, from missing offsets to overflow conflicts in flex, grid, and container height constraints.

Ibadehin Mojeed
Nov 13, 2024 ⋅ 5 min read
Task Scheduling and cron Jobs in Node Using node-cron

Scheduling tasks in Node.js using node-cron

From basic syntax and advanced techniques to practical applications and error handling, here’s how to use node-cron.

Godwin Ekuma
Nov 12, 2024 ⋅ 7 min read
Working With The Angular Tree: Flat Vs Nested Trees And More

Working with the Angular tree

The Angular tree view can be hard to get right, but once you understand it, it can be quite a powerful visual representation.

Lewis Cianci
Nov 12, 2024 ⋅ 21 min read
View all posts

2 Replies to "How is getSnapshotBeforeUpdate implemented with Hooks?"

  1. Hey, nice article! I noticed that `useLayoutEffect` did not work for you as it really happens right *after* DOM rendering. The regular `useEffect` is even more delayed — it happens in the next animation frame after rendering.

    What you could do was to make your snapshot right in the component function body. This is what actually gets called before DOM manipulations. You already have your new state/props and you can use refs to get previous ones.

  2. This article, however nicely marked-up it is, is actually useless because `useLayoutEffect` is called right *after* DOM rendering, not before it.

Leave a Reply