DEV Community: ScorbicLife

Pitfalls while memoization

ScorbicLife — Fri, 03 Nov 2023 02:15:36 +0000

As practicing dynamic programming, I was implementing a function that returns the binomial coefficient nCr given n and r.

Naive formula:

function binomial_naive(n, r) {
  if (n < 0 || r < 0 || r > n) {
    return 0;
  }
  if (r === 0 || r === n) {
    return 1;
  }
  return binomial_naive(n-1, r-1) + binomial_naive(n-1, r);
}

We can memoize this function to get O(r(n-r)) running time.

I was using Map<number, Map<number, number>>s but encountered a problem.

My initial memoization implementation had cache updating code and cache retrieval code interleaved, which made subtle bugs that only occurs only when some cache is computed.

I threw it away and coded a more straightforward implementation:

const cache = new Map();

function binomial(n, r) {
  if (!cache.has(n)) {
    cache.set(n, new Map());
  }
  if (!cache.get(n).has(r)) {
    cache.get(n).set(r, binomial_naive(n, r));
  }
  return cache.get(n).get(r);
}

function binomial_naive(n, r) {
  if (n < 0 || r < 0 || r > n) {
    return 0;
  }
  if (r === 0 || r === n) {
    return 1;
  }
  return binomial(n - 1, r) + binomial(n - 1, r - 1);
}

Now I see that we could implement this using 2d arrays which makes it a little more straightforward.

Enlightenment on how to code fast

ScorbicLife — Fri, 03 Nov 2023 00:38:16 +0000

I just observed that I can code the fastest when I have coded something similar because I can chug out code subconsciously.

I decided to put in time and effort in areas where companies prefer candidates have efficiency in.

Mistake log: put code in the wrong place

ScorbicLife — Thu, 26 Oct 2023 10:28:14 +0000

I had to write code along the lines of the following. The code is not that important.

const afterState = [...state];
for (const [iSwitch,count] of Object.entries(switchCountBySwitch)) {
    for (const clock of SWITCHES[iSwitch]) {
        afterState[clock] = (afterState[clock] + 3 * count) % 12;
    }
}
const success = afterState.every(clock => clock === 0);
if (success) {
    currentMinCount = currentCount;
}

I made a mistake by putting a portion of the code inside the wrong scope.

const afterState = [...state];
for (const [iSwitch,count] of Object.entries(switchCountBySwitch)) {
    for (const clock of SWITCHES[iSwitch]) {
        afterState[clock] = (afterState[clock] + 3 * count) % 12;
    }
    const success = afterState.every(clock => clock === 0);
    if (success) {
        currentMinCount = currentCount;
    }
}

No wonder I got the wrong answer. I should make sure to read the code carefully (esp. when debuggers are not available)

React Component, Instance, and Element

ScorbicLife — Fri, 20 Oct 2023 04:35:02 +0000

React Component : React Element : React Element Instance
= Grammar Rule : AST Node : Evaluated result of that AST Node

Escape Hatches

ScorbicLife — Thu, 19 Oct 2023 23:41:58 +0000

https://react.dev/learn/escape-hatches

Refs

Refs are values that
- persist over renders (like state)
- does not rerender the component (unlike state)

Ref attributes (which is a distinct concept from Refs)

ref attributes can be used on a builtin HTML tag can be used to get DOM nodes of the underlying element. e.g. <div ref={someRef} />
ref attributes can be used on a React component only if one creates the component with forwardRef.
You can also pass in a function to a ref attribute for custom behavior other than binding to a Ref. For example, <div ref={(element) => {}} />
ref attributes are used as an escape hatch for DOM manipulation that React cannot handle. Examples are
- Non-destructive operations such as scrolling and focusing
- Mutating part of the DOM that React never touches

Effects

There exists code that is...
- neither a pure calculation, so cannot be run on rendering
- nor is an event that has a trigger, so cannot be run in an event handler
Effects are side effects caused by rendering itself, not a particular event.
useEffect syntax is always as it has been.
- Mind your cleanups so that your effects are idempotent.
useEffect trigger timings:
- startup code runs on component mount or dependency change
- cleanup code runs on component unmount or next dependency change

Personal Recap

Where to put data in React

Data does not persist between renders: use a local variable inside component
Data persists between renders:
- On data update, should rerender: use state
- On data update, should not rerender: use ref

Where to put code in React

Pure calculation
- Put it inside a component to run it every render.
- For optimization, cache it with useMemo.
Side Effect
- If it's triggered because of an event, use an event handler.
- If it's triggered because your component rendered, use an Effect.
  - e.g. syncing your component state with external code after render.
  - e.g. sending ajax requests because a component is rendered.

Managing State

ScorbicLife — Wed, 18 Oct 2023 13:53:21 +0000

https://react.dev/learn/managing-state

Preserving and Resetting State

React resets the component's state if and only if the component in the same position in the UI tree is removed or has changed to a different component.
- Note: You can override the position inside the UI tree by providing a key prop.

Interactivity

ScorbicLife — Wed, 18 Oct 2023 13:07:40 +0000

https://react.dev/learn/adding-interactivity

Recapping the concepts I know.

State

setState: sets the state for the next render.
State is private to each instance of a component. If you render the same component in two different places, each will have its own separate state.
React hooks rely on a fixed call order.

Render and Commit

A component re-renders if and only if its state or it's parents' state are changed. (Specifically, props has nothing to do with re-renders, unless one uses memo.)