getSnapshotBeforeUpdate using react hooks - reactjs

Question

How can I implement the same logic that getSnapshotBeforeUpdate gives me using react hooks?

Answer 1

As per the React Hooks FAQ, there isn't a way to implement getSnapshotBeforeUpdate and ComponentDidCatch lifecycle method with hooks yet
Do Hooks cover all use cases for classes?
Our goal is for Hooks to cover all use cases for classes as soon as
possible. There are no Hook equivalents to the uncommon
getSnapshotBeforeUpdate and componentDidCatch lifecycles yet, but we
plan to add them soon.
It is a very early time for Hooks, so some integrations like DevTools
support or Flow/TypeScript typings may not be ready yet. Some
third-party libraries might also not be compatible with Hooks at the
moment.

Answer 2

We cannot get the snapshot data in any of the hooks (useLayoutEffect or useEffect) as both will give the updated DOM values by the time they are triggered, the best place to capture the data is just before the setting the state. for example here I am capturing the scroll position before setting the state.
function ChatBox(props){
const [state, setState] = useState({chatFetched:[],isFetching:false});
const listRef = useRef();
const previousScrollDiff = useRef(0);
// on mount
useEffect(()=>{
getSomeMessagesApi().then(resp=>{
const chatFetched = [...state.chatFetched,...resp];
setState({chatFetched});
})
},[]);
useLayoutEffect(()=>{
// use the captured snapshot here
listRef.current.scrollTop = listRef.current.scrollHeight - previousScrollDiff.current;
},[state.chatFetched])
useEffect(()=>{
// don't use captured snapshot here ,will cause jerk effect in scroll
},[state.chatFetched]);
const onScroll = (event) => {
const topReached = (event.target.scrollTop === 0);
if(topReached && !state.isFetching){
setState({...state, isFetching:true});
getSomeMessagesApi().then(resp=>{
const chatFetched = [...resp,...state.chatFetched];
// here I am capturing the data ie.., scroll position
previousScrollDiff.current = listRef.current.scrollHeight -listRef.current.scrollTop;
setState({chatFetched, isFetching:false});
})
}
}
return (
<div className="ui container">
<div
className="ui container chat list"
style={{height:'420px', width:'500px',overflow:'auto'}}
ref={listRef}
onScroll={onScroll}
>
{state.chatFetched.map((message)=>{
return <ChatLi data ={message} key ={message.key}></ChatLi>
})}
</div>
</div>
);
};
we can also useMemo to capture the data before dom update happens,
function ChatBox(props){
const [state, setState] = useState({chatFetched:[],isFetching:false});
const listRef = useRef();
const previousScrollDiff = useRef(0);
// on mount
useEffect(()=>{
getSomeMessagesApi().then(resp=>{
const chatFetched = [...state.chatFetched,...resp];
setState({chatFetched});
})
},[]);
useLayoutEffect(()=>{
// use the captured snapshot here
listRef.current.scrollTop = listRef.current.scrollHeight - previousScrollDiff.current;
},[state.chatFetched])
useEffect(()=>{
// don't use captured snapshot here ,will cause jerk effect in scroll
},[state.chatFetched]);
useMemo(() => {
// caputure dom info in use effect
if(scrollUl.current){
previousScrollDiff.current = scrollUl.current.scrollHeight - scrollUl.current.scrollTop;
}
}, [state.chatFetched]);
const onScroll = (event) => {
const topReached = (event.target.scrollTop === 0);
if(topReached && !state.isFetching){
setState({...state, isFetching:true});
getSomeMessagesApi().then(resp=>{
const chatFetched = [...resp,...state.chatFetched];
setState({chatFetched, isFetching:false});
})
}
}
return (
<div className="ui container">
<div
className="ui container chat list"
style={{height:'420px', width:'500px',overflow:'auto'}}
ref={listRef}
onScroll={onScroll}
>
{state.chatFetched.map((message)=>{
return <ChatLi data ={message} key ={message.key}></ChatLi>
})}
</div>
</div>
);
};
In the above examples I am trying to do the same that is shown here in the getSnapshotBeforeUpdate react doc

Answer 3

You can use useMemo() instead of getSnapshotBeforeUpdate(). Read more here about how to memoize calculations with React Hooks.
Here a simple example:
It always that the user types (onChange) an irrelevant state in point of view of the List Component is changed and because of this it re-rendering and can re-rendering more than 50 times it depends on the user typing, so it's used useMemo() to memoize the List Component and it stated that just todoList listens.
import List from './List'
const todo = (props) => {
const [inputIsValid, setInputIsValid] = useState(false)
const inputValidationHandler = (event) => {
if(event.target.value.trim() === '') {
setInputIsValid(false)
} else {
setInputIsValid(true)
}
}
return <React.Fragment>
<input
type="text"
placeholder="Todo"
onChange={inputValidationHandler}
/>
{
useMemo(() => (
<List items={todoList} onClick={todoRemoveHandler} />
), [todoList])
}
</React.Fragment>
}
export default todo

Answer 4

Short answer: There isn't a react hook for it! But we can create a custom one!
That's using useEffect() and useLayoutEffect()! As they are the key elements!
The final example is all last! So make sure to check it (Our custom hooks equivalent).
useEffect() and useLayoutEffect()
useEffect => useEffect runs asynchronously and after a render is painted to the screen.
You cause a render somehow (change state, or the parent re-renders)
React renders your component (calls it)
The screen is visually updated
THEN useEffect runs
useEffect() => render() => dom mutation => repaint => useEffect() [access dom new state] (changing dom directly) => repaint
==> Meaning useEffect() is like comonentDidUpdate()!
useLayoutEffect => useLayoutEffect, on the other hand, runs synchronously after a render but before the screen is updated. That goes:
You cause a render somehow (change state, or the parent re-renders)
React renders your component (calls it)
useLayoutEffect runs, and React waits for it to finish.
The screen is visually updated
useLayoutEffect() => render => dom mutation [detached] => useLayoutEffec() [access dom new state] (mutate dom) => repaint (commit, attach)
===> Meaning useLayoutEffect() run like getSnapshotBeforeUpdate()
Knowing this! We can create our custom hooks that allow us to do things like with getSnapshotBeforeUpdate() and didComponentUpdate().
Such an example would be updating the scrolling for auto update in chat applications!
usePreviousPropsAndState()
Similar to the usePrevious() hook mentionned in "how to get previous prop and state"
Here an hook implementation for saving and getting previous props and state!
const usePrevPropsAndState = (props, state) => {
const prevPropsAndStateRef = useRef({ props: null, state: null })
const prevProps = prevPropsAndStateRef.current.props
const prevState = prevPropsAndStateRef.current.state
useEffect(() => {
prevPropsAndStateRef.current = { props, state }
})
return { prevProps, prevState }
}
We can see how we need to pass the props and state object!
What you pass is what you get! So it's easy to work with! An object will do well!
useGetSnapshotBeforeUpdate & useComponentDidUpdate
Here the total solution or implementation
const useGetSnapshotBeforeUpdate = (cb, props, state) => {
// get prev props and state
const { prevProps, prevState } = usePrevPropsAndState(props, state)
const snapshot = useRef(null)
// getSnapshotBeforeUpdate (execute before the changes are comitted for painting! Before anythingg show on screen) - not run on mount + run on every update
const componentJustMounted = useRef(true)
useLayoutEffect(() => {
if (!componentJustMounted.current) { // skip first run at mount
snapshot.current = cb(prevProps, prevState)
}
componentJustMounted.current = false
})
// ________ a hook construction within a hook with closure __________
const useComponentDidUpdate = cb => {
// run after the changes are applied (commited) and apparent on screen
useEffect(() => {
if (!componentJustMounted.current) { // skip first run at mount
cb(prevProps, prevState, snapshot.current)
}
})
}
// returning the ComponentDidUpdate hook!
return useComponentDidUpdate
}
You can notice how we constructed the hook within the other hook! Make use of closure! And accessing elements directly! And linking the two hooks!
pre-commit phase and commit phase (and effects hooks)
I used those terms! What does it actually means ?
class example
From the doc
class ScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// Are we adding new items to the list?
// Capture the scroll position so we can adjust scroll later.
if (prevProps.list.length < this.props.list.length) {
const list = this.listRef.current;
return list.scrollHeight - list.scrollTop;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// If we have a snapshot value, we've just added new items.
// Adjust scroll so these new items don't push the old ones out of view.
// (snapshot here is the value returned from getSnapshotBeforeUpdate)
if (snapshot !== null) {
const list = this.listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
}
render() {
return (
<div ref={this.listRef}>{/* ...contents... */}</div>
);
}
}
Our custom hooks equivalent
const App = props => {
// other stuff ...
const useComponentDidUpdate = useGetSnapshotBeforeUpdate(
(prevProps, prevState) => {
if (prevProps.list.length < props.list.length) {
const list = listRef.current;
return list.scrollHeight - list.scrollTop;
}
return null;
},
props,
state
)
useComponentDidUpdate((prevProps, prevState, snapshot) => {
if (snapshot !== null) {
const list = listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
})
// rest ...
}
useEffectLayout() in useGetSnapshotBeforeUpdate hook will execute first!
useEffect() in useComponentDidUpdate will execute after!
As just was shown in the lifecyle schema!