Added Typescript version of usePrevious hook (#101)

* Added Typescript version of usePrevious hook

* Simple type fix

* Convert added typescript version of useWindowSize

Co-authored-by: Nika Sepiskveradze <[email protected]>

Author: nikasepiskveradze

src/pages/usePrevious.md

@@ -45,3 +45,41 @@ function usePrevious(value) {
   return ref.current;
 }
 ```
+
+```typescript
+import { useState, useEffect, useRef } from "react";
+
+// Usage
+function App() {
+  // State value and setter for our example
+  const [count, setCount] = useState<number>(0);
+
+  // Get the previous value (was passed into hook on last render)
+  const prevCount: number = usePrevious<number>(count);
+
+  // Display both current and previous count value
+  return (
+    <div>
+      <h1>
+        Now: {count}, before: {prevCount}
+      </h1>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}
+
+// Hook
+function usePrevious<T>(value: T): T {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref: any = useRef<T>();
+
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}
+```

src/pages/useWindowSize.md

@@ -56,3 +56,56 @@ function useWindowSize() {
   return windowSize;
 }
 ```
+
+```typescript jsx
+import { useState, useEffect } from "react";
+
+// Define general type for useWindowSize hook, which includes width and height
+interface Size {
+  width: number | undefined,
+  height: number | undefined,
+}
+
+// Usage
+function App() {
+  const size: Size = useWindowSize();
+
+  return (
+    <div>
+      {size.width}px / {size.height}px
+    </div>
+  );
+}
+
+// Hook
+function useWindowSize(): Size {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState<Size>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize;
+}
+```