Forem: jser

How does useImperativeHandle() work? - React source code walkthrough

jser — Sun, 26 Dec 2021 12:12:56 +0000

Have you used useImperativeHandle() before ? Let's figure out how it works intenrally.

Usage

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));
  return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);

By above code, we can attatch a ref to FancyInput now.

function App() {
  const ref = useRef();
  const focus = useCallback(() => {
    ref.current?.focus();
  }, []);
  return (
    <div>
      <FancyInput ref={inputRef} />
      <button onClick={focus} />
    </div>
  );
}

Looks straightforward, but why we do this?

what if we just update ref.current?

Rather than useImperativeHandle(), what if we just update ref.current? like below.

function FancyInput(props, ref) {
  const inputRef = useRef();
  ref.current = () => ({
    focus: () => {
      inputRef.current.focus();
    },
  });
  return <input ref={inputRef} />;
}

It actually works, but there is a problem, FancyInput only set current of ref accepted, not cleaning up.

Recall our explanation in React Source Code Walkthrough 11 - how useRef() works?, React automatically cleans up refs attached to elements, but now it doesn't.

What if ref changes during renders? Then the old ref would still hold the ref which causes problems since from the usage of <FancyInput ref={inputRef} />, it should be cleaned.

How to solve this ? We have useEffect() which could help clean things up, so we can try things like this.

function FancyInput(props, ref) {
  const inputRef = useRef();
  useEffect(() => {
    ref.current = () => ({
      focus: () => {
        inputRef.current.focus();
      },
    });
    return () => {
      ref.current = null;
    };
  }, [ref]);

  return <input ref={inputRef} />;
}

but wait, how do you know for sure that ref is RefObject not function ref? Ok then, we need to check that.

function FancyInput(props, ref) {
  const inputRef = useRef();
  useEffect(() => {
    if (typeof ref === "function") {
      ref({
        focus: () => {
          inputRef.current.focus();
        },
      });
    } else {
      ref.current = () => ({
        focus: () => {
          inputRef.current.focus();
        },
      });
    }

    return () => {
      if (typeof ref === "function") {
        ref(null);
      } else {
        ref.current = null;
      }
    };
  }, [ref]);

  return <input ref={inputRef} />;
}

You know what ? this is actually very similar to how useImperativeHandle() works. Except useImperativeHandle() is a layout effect, the ref setting happens at same stage of useLayoutEffect(), soonner than useEffect().

Btw, Watch my video of explaining useLayoutEffect https://www.youtube.com/watch?v=6HLvyiYv7HI

Ok let's jump into the source code.

For effects, there is mount and update, which are different based on when useImperativeHandle() is called.

This is the simplified version of mountImperativeHandle(), (origin code)

function mountImperativeHandle<T>(
  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
  create: () => T,
  deps: Array<mixed> | void | null,
): void {
  return mountEffectImpl(
    fiberFlags,
    HookLayout,
    imperativeHandleEffect.bind(null, create, ref),
    effectDeps,
  );
}

Also for update, origin code

function updateImperativeHandle<T>(
  ref: {| current: T | null |} | ((inst: T | null) => mixed) | null | void,
  create: () => T,
  deps: Array<mixed> | void | null
): void {
  // TODO: If deps are provided, should we skip comparing the ref itself?
  const effectDeps =
    deps !== null && deps !== undefined ? deps.concat([ref]) : null;

  return updateEffectImpl(
    UpdateEffect,
    HookLayout,
    imperativeHandleEffect.bind(null, create, ref),
    effectDeps
  );
}

Notice that

under the hood mountEffectImpl and updateEffectImpl are used. useEffect() and useLayoutEffect() does the same, here and here
the 2nd argument is HookLayout, which means it is layout effect.

Last piece of puzzle, this is how imperativeHandleEffect() works. (code)

function imperativeHandleEffect<T>(
  create: () => T,
  ref: {| current: T | null |} | ((inst: T | null) => mixed) | null | void
) {
  if (typeof ref === "function") {
    const refCallback = ref;
    const inst = create();
    refCallback(inst);
    return () => {
      refCallback(null);
    };
  } else if (ref !== null && ref !== undefined) {
    const refObject = ref;
    const inst = create();
    refObject.current = inst;
    return () => {
      refObject.current = null;
    };
  }
}

Set aside the details of perfectness, it actually looks very much the same as what we wrote, right?

Wrap-up

useImperativeHandle() is no magic, it just wraps the ref setting and cleaning for us, internally it is in the same stage as useLayoutEffect() so a bit sooner than useEffect().

BFE.dev #34. implement `Promise.any()`

jser — Mon, 31 May 2021 22:39:15 +0000

BFE.dev is like a LeetCode for Front End developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#34. implement Promise.any()

Analysis

AS MDN says,

Promise.any() takes an iterable of Promise objects and, as soon as one of the promises in the iterable fulfils, returns a single promise that resolves with the value from that promise
e item one by one randomly from rest possible positions.

We can follow the definition and create a new Promise that resolves when any promise passed in resolves.

Problem is when all promises reject, we need an array to hold all the errors, and finally reject the returned promise by counting.

Show me the code


/**
 * @param {Array<Promise>} promises
 * @returns {Promise}
 */
function any(promises) {
  // return a Promise, which resolves as soon as one promise resolves
  return new Promise((resolve, reject) => {
    let isFulfilled = false
    const errors = []
    let errorCount = 0
    promises.forEach((promise, index) => promise.then((data) => {
      if (!isFulfilled) {
        resolve(data)
        isFulfilled = true
      }
    }, (error) => {
      errors[index] = error
      errorCount += 1

      if (errorCount === promises.length) {
        reject(new AggregateError('none resolved', errors))
      }
    }))
  })
}

Passed

Here is my video explaining: https://www.youtube.com/watch?v=fYTmLpFJPdw

Hope it helps, you can have a try at here

BFE.dev #8. can you shuffle() an array?

jser — Thu, 08 Apr 2021 02:52:23 +0000

BFE.dev is like a LeetCode for Front End developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#8. can you shuffle() an array?

Analysis

The goal is to shuffle an array, seems pretty easy. Since shuffle is choose one of the all possible permutations, so we can choose the item one by one randomly from rest possible positions.

function shuffle(arr) {
  for (let i = 0; i < arr.length; i++) {
    const j = i + Math.floor(Math.random() * (arr.length - i))
    ;[arr[i], arr[j]] = [arr[j], arr[i]]
  }
}

Code Not working

function shuffle(arr) {
  for (let i = 0; i < arr.length; i++) {
    const j = Math.floor(Math.random() * arr.length)
    ;[arr[i], arr[j]] = [arr[j], arr[i]]
  }
}

Above code looks working but actually not. It loops all the positions and randomly swaps with another.

Suppose we have an array of [1,2,3,4].

Let's look at number 1. The first step is to swap 1 with all 4 positions, chance is high that it is moved to the positions other than itself and later it is traversed and swapped again.

Now let's look at number 4. It is last number to be traversed, and it might be also swapped before its turn and never be traversed again.

So 1 and 4 have different chances of be swapped, 4 is obviously lower, so the result array is not randomly shuffled.

Passed

Here is my video explaining: https://www.youtube.com/watch?v=FpKnR7RQaHM

Hope it helps, you can have a try at here

create a Modal System with Context API in React

jser — Fri, 19 Mar 2021 00:31:15 +0000

How to create a Modal System in React?

React Portals might be good but personally I'd like to separate the Modals from Screens, because the order information is not fixed for a modal, yet push and pop actions have the order info naturally.

So I recommend using Context API to create a Modal System, here is my super rough demo code: https://codesandbox.io/s/suspicious-f...

And here is a video explaining:

https://www.youtube.com/watch?v=s20TOqXjVqk

Hope it helps.

BFE.dev #55. highlight keywords in HTML string

jser — Fri, 06 Nov 2020 15:05:41 +0000

BFE.dev is like a LeetCode for Front End developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#55. highlight keywords in HTML string

Analysis

The goal is to wrap keywords with <em>.

highlightKeywords(
  'Hello FrontEnd Lovers', 
  ['Hello', 'Front', 'JavaScript']
)
// '<em>Hello</em> <em>Front</em>End Lovers'

Looks easy, just search for the keywords and replace them. But it is trickier when there are overlapping keywords

highlightKeywords(
  'Hello FrontEnd Lovers', 
  ['Front', 'FrontEnd', 'JavaScript']
)
// 'Hello <em>FrontEnd</em> Lovers'

The idea I came up is like this.

when we find a keyword, say 'Front' in above example, we keep track of the start and end.
we loop through the letters between them, and check if there is new word matched. If matched we extend the end if needed, this is in case there are some keywords like ontE.
stop when end is met. The substring between start and end should be highlighted.

Above logic handles overlapping, what about adjacent case ?

highlightKeywords(
  'Hello FrontEnd Lovers', 
  ['Front', 'End', 'JavaScript']
)
// 'Hello <em>FrontEnd</em> Lovers'

For this case, we could actually repeatedly search for the intervals from above logic, and group them up.

Show me the code

First we solve a sub problem:

Given a start index, return the end index of highlighting substring.
If not found, return -1.

We could follow the steps explained above to get the following code.

const keywordSet = new Set(keywords)

// return -1 if non-existing
const getEndForEm = (start) => {
  let isEmFound = false
  let end = start

  // extend end if new keywords are matched.
  while (start <= end) {
    for (let word of keywordSet) {
      const length = word.length
      if (html.slice(start, start + length) === word) {
        isEmFound = true
        end = Math.max(end, start + length - 1)
      }
    }

    start += 1
  }

  return isEmFound ? end : -1
}

Now things become easier, we could just loop through all the indexes, and repeatedly call above function to get the real end index to highlight.

let result = ''

for (let i = 0; i < html.length;) {
  let endForEm = getEndForEm(i)

  // check if there is adjacent keyword 
  while (endForEm > -1) {
    const nextEndForEm = getEndForEm(endForEm + 1)
    if (nextEndForEm === -1) {
      break
    }
    endForEm = nextEndForEm
  }

  if (endForEm > -1) {
    result += '<em>' + html.slice(i, endForEm + 1) + '</em>'
    i = endForEm + 1
  } else {
    result += html[i]
    i += 1
  }
}

return result

Passed

This is an interesting problem.

Hope it helps, you can have a try at here

BFE.dev #20. Detect data type in JavaScript

jser — Wed, 14 Oct 2020 06:48:36 +0000

BFE.dev is like a LeetCode for Front End developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#20. Detect data type in JavaScript

Easy one

This is well-known trick in JavaScript - using Object.prototype.toString() to get the data type.

Nothing fancy, code is here

function detectType(data) {

  let type = ''

  const tag = Object.prototype.toString.call(data)  // '[object Undefined]'
  const matches = tag.match(/\[object (\S+)\]/)

  if (matches) {
    type = matches[1].toLowerCase()
  }

  const allowedTypes = new Set([
    'number',
    'null',
    'string',
    'undefined',
    'bigint',
    'symbol',
    'boolean',
    'array',
    'arraybuffer',
    'date',
    'function',
    'map',
    'set'
    ])

  if (allowedTypes.has(type)) {
    return type
  }

  return 'object'
}

Passed

This is a fairly simple problem.

Hope it helps, you can have a try at here

BFE.dev #104. Traverse DOM level by level

jser — Fri, 09 Oct 2020 06:36:06 +0000

BFE.dev is like a LeetCode for Front End developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#104. Traverse DOM level by level

Analysis

Level by level, so initial level would be

[div]

then the next level is

[p, p, div]

then the next level is

[button, a, p, div]

We could just keeping pulling the elements from left, and push their children in from right, right ? This is a queue.

Show me the code

The implementation is BFS, not difficult, and we are only required to collect the elements, so doesn't need to care about the boundary of each level.

/**
 * @param { HTMLElement } root
 * @returns { HTMLElement[] }
 */
function flatten(root) {
  if (root === null) return []

  const queue = [root]

  const result = []

  while (queue.length > 0) {
    const head = queue.shift()
    result.push(head)
    queue.push(...head.children)
  }

  return result
}

Passed

This is a fairly simple problem.

Hope it helps, you can have a try at here

BFE.dev #33. implement Promise.allSettled()

jser — Sun, 27 Sep 2020 08:45:20 +0000

BFE.dev is like a LeetCode for Front End developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#33. implement Promise.allSettled()

Analysis

Different from Promise.all() which rejects right away once an error occurs, Promise.allSettled() waits for all promises to settle.

So we just need to keep track of all the promises, by using an array. Promises might settle in arbitrary order, so use index to set the right location.

Show me the code

First start with the basic skeleton of new Promise.

function allSettled(promises) {

  return new Promise((resolve, reject) => {
    const result = []

    promises.forEach((promise, index) => {
      promise.then((value) => {
        result[index] = {
          status: 'fulfilled',
          value
        }
      }, (reason) => {
        result[index] = {
          status: 'rejected',
          reason
        }
      })
    })
  })
}

Then we need to resolve when all promises are settled, so use a counter to achieve this.

And also notice that the input might contain non-Promises.

function allSettled(promises) {
  if (promises.length === 0) return Promise.resolve([])

  const _promises = promises.map(
    item => item instanceof Promise ? item : Promise.resolve(item)
    )

  return new Promise((resolve, reject) => {
    const result = []
    let unSettledPromiseCount = _promises.length

    _promises.forEach((promise, index) => {
      promise.then((value) => {
        result[index] = {
          status: 'fulfilled',
          value
        }

        unSettledPromiseCount -= 1
        // resolve after all are settled
        if (unSettledPromiseCount === 0) {
          resolve(result)
        }
      }, (reason) => {
        result[index] = {
          status: 'rejected',
          reason
        }

        unSettledPromiseCount -= 1
        // resolve after all are settled
        if (unSettledPromiseCount === 0) {
          resolve(result)
        }
      })
    })
  })
}

Passed

This is a fairly simple problem.

Hope it helps, you can have a try at here

BFE.dev #107. Find the largest difference

jser — Sun, 27 Sep 2020 08:36:23 +0000

https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#107. Find the largest difference

just coding

Obviously we could the max difference by subtracting the largest number with smallest one, so below is the straight approach.

function largestDiff(arr) {
  if (arr.length === 0) return 0
  return Math.abs(Math.max(...arr) - Math.min(...arr))
}

Or we could get min/max at the same time.

Above approach gets max first and then min, while we could get them at the same loop, by just keeping track of the min/max.

function largestDiff(arr) {
  if (arr.length === 0) return 0

  let min = Infinity
  let max = -Infinity
  let result = Infinity

  for (let item of arr) {
    if (item < min) {
      min = item
      result = max - min
    }

    if (item > max) {
      max = item
      result = max - min
    }
  }

  return result
}

The time complexity doesn't change though, they are still O(n) as the same one.

Passed

This is a fairly simple problem.

Interested to try by yourself? Have a try at BFE.dev https://bigfrontend.dev/problem/Find-the-largest-difference

BFE.dev #23. create a sum()

jser — Wed, 23 Sep 2020 11:13:58 +0000

https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#23. create a sum()

problem

Create a sum(), which makes following possible

const sum1 = sum(1)
sum1(2) == 3 // true
sum1(3) == 4 // true
sum(1)(2)(3) == 6 // true
sum(5)(-1)(2) == 6

analysis

From above requirements, obviously

sum() should return a function, which takes in one new argument
sum() sums up all the arguments passed, and repeat 1
A function could equal to a number with == not ===, by type coercion, we could use valueOf or toString to accomplish.

Let's code

First we handle the function returning part. Above 1 and 2 tells us that we need to accumulate the arguments, which could be treated as the second argument

function sum(num, currentSum = 0) {
  const newCurrentSum = num + currentSum

  const func = function(arg) {
    return sum(arg, num + currentSum)
  }

  return func
}

At last, let's define the valueOf.

function sum(num, currentSum = 0) {
  const newCurrentSum = num + currentSum

  const func = function(arg) {
    return sum(arg, num + currentSum)
  }

  func.valueOf = () => newCurrentSum
  // below also works
  // func.toString = () => newCurrentSum.toString()

  return func
}

OK, passed

Interested to try by yourself? Have a try at BFE.dev https://bigfrontend.dev/problem/create-a-sum

BFE.dev #9. decode message

jser — Mon, 14 Sep 2020 16:23:26 +0000

https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#9. decode message

Problem

Your are given a 2-D array of characters. There is a hidden message in it.

I B C A L K A
D R F C A E A
G H O E L A D

The way to collect the message is as follows

start at top left
move diagonally down right
when cannot move any more, try to switch to diagonally up right
when cannot move any more, try switch to diagonally down right, repeat 3
stop when cannot neither move down right or up right. the

character on the path is the message
for the input above, IROCLED should be returned.

Analysis

While moving forward, the direction only changes along the y-axis, meaning we could use a flag to hold the vertical direction.

By keep tracking current position x, y, we could get the next position x + 1, y + 1, or x + 1, y - 1.

When border is met, we change the vertical direction. When the last element is traversed, stop and return the result.

Let's write some code

The code is fairly simple.


/**
 * @param { string[][] } message
 * @returns { string }
 */
function decode(message) {
  // edge case
  const rows = message.length
  if (rows === 0) return ''
  const cols = message[0].length
  if (cols === 0) return ''

  let result = ''
  let i = 0
  let j = 0

  // keep track of the direction vertically
  let directionY = 1

  while (j < cols) {
    result += message[i][j]

    // switch direction at the border
    if (i === rows - 1) {
      directionY = -1
    }
    if (i === 0) {
      directionY = 1
    }

    i += directionY
    j += 1
  }

  return result
}

I've posted above solution here

Passed!

If you are interested, have a try at BFE.dev https://bigfrontend.dev/problem/decode-message

Hope it helps, see you next time!

BFE.dev #32. implement `Promise.all()`

jser — Sun, 13 Sep 2020 14:27:32 +0000

https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

This article is about the coding problem BFE.dev#32. implement Promise.all()

Analysis

Promise.all() returns a Promise that

fulfills when all promises have fulfilled
rejects when any promise is rejected.

So we could chain all the promises with a new fulfill handler and rejection handler:

when fulfilled, collect the data and check if ready to fulfill the returned Promise
when rejected, reject the returned Promise.

Let's write some code

Basic skeleton is like this

function all(promises) {
  return new Promise((resolve, reject) => {
    promises.forEach((promise, index) => {
      promise.then((value) => {
        // TODO
      }, (error) => {
        // TODO
      })
    }) 
  })
}

The fulfilled data should be stored in an array, and the promises might resolve in different order, so index is used to set the data at right position.

And the array might have empty holes, so we could use anther variable to keep track of the fulfilled promise count.

function all(promises) {
  return new Promise((resolve, reject) => {
    const result = []
    let fulfilledCount = 0

    promises.forEach((promise, index) => {
      promise.then((value) => {
        result[index] = value

        fulfilledCount += 1
        if (fulfilledCount === promises.length) {
          resolve(result)
        }
      }, (error) => {
       // TODO
      })
    }) 
  })
}

For rejection, once error happens, latter promises no matter fulfilled or rejected, all should be ignored. we could use a flag to indicate this.

function all(promises) {
  return new Promise((resolve, reject) => {
    const result = []
    let fulfilledCount = 0
    let isErrored = false

    promises.forEach((promise, index) => {
      promise.then((value) => {
        if (isErrored) return
        result[index] = value

        fulfilledCount += 1
        if (fulfilledCount === promises.length) {
          resolve(result)
        }
      }, (error) => {
        if (isErrored) return
        isErrored = true
        reject(error)
      })
    }) 
  })
}

The last part is about the input validation, seems like data types other than Promise could be passed in, so we normalize the input and here is the final code.

function all(promises) {
  const _promises = promises.map(
    (item) => item instanceof Promise ? item : Promise.resolve(item)
  )

  // resolve if empty 
  if (_promises.length === 0) {
    return Promise.resolve([])
  }

  return new Promise((resolve, reject) => {
    const result = []
    let fulfilledCount = 0
    let isErrored = false

    _promises.forEach((promise, index) => {
      promise.then((value) => {
        if (isErrored) return
        result[index] = value

        fulfilledCount += 1
        if (fulfilledCount === _promises.length) {
          resolve(result)
        }
      }, (error) => {
        if (isErrored) return
        isErrored = true
        reject(error)
      })
    }) 
  })
}

Passed!

If you are interested, have a try at BFE.dev https://bigfrontend.dev/problem/implement-Promise-all

Hope it helps, see you next time!