How is useRef being used in the react-typescript-apollo tutorial?

[saurabsalhotra]

I'm a bit confused as to how is useRef being used here. I'm sorry if this is not the place to ask doubts.

the useEffect at line 119 is is reassigning the ref to the latest incoming todo. Which it ideally shouldn't do as newestTodoId represent the newest todo that is currently visible. If you were to remove this line the app still works fine, which makes me question what does this line actually do.

Secondly even though newestTodoId is being assigned here a new value, if I do a console.log outside the useEffect, it still shows me the value of the topmost visible todo rather than the latest incoming todo.

https://github.com/hasura/learn-graphql/blob/master/tutorials/frontend/typescript-react-apollo/app-final/src/components/Todo/TodoPublicList.tsx

useEffect( () => { if (props.latestTodo && props.latestTodo.id! > newestTodoId.current) { setNewTodosCount(n => n + 1); **newestTodoId.current = props.latestTodo.id!;** } }, [props.latestTodo] );

can anybody please explain ? Removing this line doesn't affect the app at all.