Add some react solutions

react/usearray_en.md

@@ -1,4 +1,31 @@
+```typescript
+import React, { useState, useCallback } from 'react'
 
-There is no solution yet.
+type UseArrayActions<T> = {
+  push: (item: T) => void,
+  removeByIndex: (index: number) => void
+}
 
-Would you like to [contribute to the solution](https://github.com/BFEdev/BFE.dev-solutions/blob/main/react/usearray_en.md)? [Contribute guideline](https://github.com/BFEdev/BFE.dev-solutions#how-to-contribute)
+export function useArray<T>(initialValue: T[]): { value: T[] } & UseArrayActions<T> {
+  const [array, setArray] = useState<T[]>(initialValue);
+
+  const push = useCallback((item : T) => {
+    const copy = array.map((x) => x) // Mapping with the identity function creates a shallow copy
+    copy.push(item);
+    setArray(copy);
+  }, []); // useCallback makes it so that React does not create a new instance of the method on each usage of the hook
+
+
+  const removeByIndex = useCallback((index : number) => {
+    const copy = array.map((x) => x) // Same as above
+    copy.splice(index, 1); // Removes 1 element at the specified index
+    setArray(copy);
+  }, []) 
+
+  return {
+    value: array,
+    push: push,
+    removeByIndex: removeByIndex
+  }
+}
+```

react/useeffectonce_en.md

@@ -1,4 +1,10 @@
+```typescript
+import { EffectCallback, useEffect } from 'react'
 
-There is no solution yet.
+export function useEffectOnce(effect: EffectCallback) {
+  useEffect(() => {
+    return effect() //Returns effect's cleanup function
+  }, []) //An empty dependency array means the effect will only run once on component mount
+}
+```
 
-Would you like to [contribute to the solution](https://github.com/BFEdev/BFE.dev-solutions/blob/main/react/useeffectonce_en.md)? [Contribute guideline](https://github.com/BFEdev/BFE.dev-solutions#how-to-contribute)

react/useprevious_en.md

@@ -1,4 +1,13 @@
+```typescript
+import {useRef, useEffect} from "react";
 
-There is no solution yet.
+export function usePrevious<T>(value: T): T | undefined {
+  const previous = useRef<T|undefined>(undefined)
 
-Would you like to [contribute to the solution](https://github.com/BFEdev/BFE.dev-solutions/blob/main/react/useprevious_en.md)? [Contribute guideline](https://github.com/BFEdev/BFE.dev-solutions#how-to-contribute)
+  useEffect(() => {
+    previous.current = value // Does not trigger rerender unlike a state variable
+  }, [value]); // Run on rerender only if the value has changed
+
+  return previous.current; //As unintuitive as it sounds, this actually returns the previous value, since useEffect only runs on rerender and modifying a ref's value does not trigger a rerender
+}
+```

react/usetoggle_en.md

@@ -1,4 +1,13 @@
+```typescript
+import {useState} from "react";
 
-There is no solution yet.
+export function useToggle(on: boolean): [boolean, () => void] {
+  const [status, setStatus] = useState(on);
 
-Would you like to [contribute to the solution](https://github.com/BFEdev/BFE.dev-solutions/blob/main/react/usetoggle_en.md)? [Contribute guideline](https://github.com/BFEdev/BFE.dev-solutions#how-to-contribute)
+  const toggleStatus = () => {
+    setStatus(!status);
+  }
+
+  return [status, toggleStatus]
+}
+```