From d92d586caeaf915b4ab1fe5318773a7219715b0c Mon Sep 17 00:00:00 2001 From: Edern Date: Thu, 26 Oct 2023 11:27:43 +0200 Subject: [PATCH 1/4] Update useeffectonce_en.md --- react/useeffectonce_en.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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) From ebc4ecefcaaadeca1d433955104ea2b321271906 Mon Sep 17 00:00:00 2001 From: Edern Date: Thu, 26 Oct 2023 11:33:30 +0200 Subject: [PATCH 2/4] Update useprevious_en.md --- react/useprevious_en.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) 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 +} +``` From d45025893c871233b9e79ec74b7837b0fd044a9d Mon Sep 17 00:00:00 2001 From: Edern Date: Thu, 26 Oct 2023 11:40:18 +0200 Subject: [PATCH 3/4] Update usetoggle_en.md --- react/usetoggle_en.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) 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] +} +``` From 30401ace5e74daf29759cd4d31aba359c8412963 Mon Sep 17 00:00:00 2001 From: Edern Date: Thu, 26 Oct 2023 11:52:02 +0200 Subject: [PATCH 4/4] Update usearray_en.md --- react/usearray_en.md | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) 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 + } +} +```