Skip to main content

useRef in store.subscribe, re-render

Image
By andmap
const Dashboard: React.FC = () => {
const store = createStore(countReducer)
const divRef = useRef<HTMLDivElement>(null);
store.subscribe(() => {
const state = store.getState()
if (divRef.current)
divRef.current.innerText = `this is cool, another listener: ${state.count}`;
})


return (

...

<button onClick={() => store.dispatch({ type: ActionType.INCREMENT })}>add</button>
<button onClick={() => store.dispatch({ type: ActionType.DECREMENT })}>minus</button>

<div ref={divRef}>0</div>
...


)
}


Re-Render:

const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
Labels:

Popular posts from this blog

Big-Oh (O) Notation, and sorting in Javascript

By andmap
Asymptotic notations are classified into three types: Worst case time complexity : It is a function defined as a result of a maximum number of steps taken on any instance of size n. It is usually expressed in  Big O notation . Average case time complexity : It is a function defined as a result of the average number of steps taken on any instance of size n. It is usually expressed in  Big theta notation . Best case time complexity : It is a function defined as a result of the minimum number of steps taken on any instance of size n. It is usually expressed in  Big omega notation . Space complexity : It is a function defined as a result of additional memory space needed to carry out the algorithm. It is usually expressed in  Big O notation . Big-Oh (O) notation Big Omega ( Ω ) notation Big Theta ( Θ ) notation Default sort() in JavaScript uses  insertion sort  by  V8 Engine of Chrome  and  Merge sort  by  Mozilla Firefox  and...
Read more

setup prettier / eslint for create-react-app typescript

By
1. npm i -D prettier  2. create .prettierrc.json { "trailingComma": "all", "tabWidth": 2, "singleQuote": true, "jsxBracketSameLine": true,    "semi": false } 3. npm i -D eslint-config-prettier 4. in package.json, add this: "eslintConfig": { "extends": [ "react-app", "react-app/jest", "prettier" ] }, 5. install extension in VS Code Prettier extension
Read more