diff --git a/react/usearray_en.md b/react/usearray_en.md index 23cbe4f6..61d0685b 100644 --- a/react/usearray_en.md +++ b/react/usearray_en.md @@ -1,4 +1,31 @@ +```typescript +import React, { useState, useCallback } from 'react' -There is no solution yet. +type UseArrayActions = { + 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(initialValue: T[]): { value: T[] } & UseArrayActions { + const [array, setArray] = useState(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 + } +} +``` diff --git a/react/useeffectonce_en.md b/react/useeffectonce_en.md index 061f6d46..e0bae87d 100644 --- a/react/useeffectonce_en.md +++ b/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) diff --git a/react/useprevious_en.md b/react/useprevious_en.md index 49dd5ad3..d3ba45d6 100644 --- a/react/useprevious_en.md +++ b/react/useprevious_en.md @@ -1,4 +1,13 @@ +```typescript +import {useRef, useEffect} from "react"; -There is no solution yet. +export function usePrevious(value: T): T | undefined { + const previous = useRef(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 +} +``` diff --git a/react/usetoggle_en.md b/react/usetoggle_en.md index df70a3c0..63dd0cd8 100644 --- a/react/usetoggle_en.md +++ b/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] +} +```