This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Ever wondered what triggered a rerendering in React? | |
* Who was the killer? Which dependency got updated? | |
* This is a very stupid little code that can help you debug the issue. | |
*/ | |
import { useRef } from 'react'; | |
type DependenciesObject = { | |
[dependencyName: string]: any; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useRef } from 'react'; | |
// wanna send a ton of requests but only needing the last one? | |
// note: on the backend even aborted requests are going to use resources | |
export function useAbortableFetch() { | |
const controllerRef = useRef<AbortController | null>(null); | |
async function fetchThatAbortsPreviousCall( | |
input: string | URL | Request, | |
options?: RequestInit, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* This is very primitive styling, I kept it like this as style is now not important. | |
If you change the size make sure the scrollbar is visible as without it nothing will happen. | |
*/ | |
.controller-div { | |
background-color: #ddffee; | |
width: 100px; | |
height: 200px; | |
max-height: 100px; | |
overflow-y: scroll; | |
border-radius: 15px; |