profile
viewpoint

Ask questionsBug: hook return setter losts its effect when assign it to some obj after click its dom node in react-dev-tool

React version: 16.12.0

description

hook return setter to lost its effect when assign it to some obj after click its dom node in react-dev-tool. prev closed issue

Steps To Reproduce

  1. open react-dev-tool
  2. click the dom node in the panel
  3. input content at input box1 or input box2 here is online demo

Link to code example:

import React, { useState, useCallback, useRef } from "react";

const fnWrapper = { setCount: () => {} };

export default function DemoCounter() {
  console.log("render DemoCounter");
  const m = useState(0);
  const f = useRef(null);

  // this is not ok
  // fnWrapper.setCount = s => {
  //   console.log('fnWrapper.setCount');
  //   m[1](s);
  // }

  // this is not ok also
  // fnWrapper.setCount = useCallback((s)=>{
  //   m[1](s)
  // }, [m]);

  fnWrapper.setCount = m[1];//not ok

  f.current = m[1];//not ok

  console.log(fnWrapper.setCount === m[1]);

  if (
    typeof fnWrapper.setCount !== "function" ||
    typeof f.current !== "function"
  ) {
    console.log(typeof fnWrapper.setCount);
    console.log(fnWrapper.setCount);
    alert("wow");
  }

  return (
    <div style={{ border: "1px solid blue", margin: "8px" }}>
      count: {m[0]} <br />
      <h3>1 and 2 become bad after click the dom node in react-dev-tool</h3>
      {/* this does not work if I open react-dev-tool and click the dom node */}
      <input
        value={m[0]}
        onChange={e => fnWrapper.setCount(e.currentTarget.value)}
      />
      1 not ok
      <br />
      {/* this does not work if I open react-dev-tool and click the dom node */}
      <input value={m[0]} onChange={e => f.current(e.currentTarget.value)} />
      2 not ok
      <br />
      {/* this always works not matter I open react-dev-tool and click the dom node or not */}
      <input value={m[0]} onChange={e => m[1](e.currentTarget.value)} />3 ok!
    </div>
  );
}

The current behavior

input 1 and input 2 's onChange event doesn't work any more after I clicked the dom node in react-dev-tool panel .

The expected behavior

The onChange event works well no matter I clicked the dom node in react-dev-tool panel or not.

facebook/react

Answer questions vkurchatkin

Documentation explicitly allows assigning to ref.current for lazy initialisation which makes it possible to observe invalid setState

useful!

Related questions

Disable react strict mode on third party libraries hot 6
Refs - &#34;object is not extensible&#34; hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
React@16.9 block `javascript:void(0);` hot 4
TypeError: Object(...) is not a function hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
Function components do not support contextType. hot 2
Feedback on useEffect depndencies change error hot 2
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 2
Github User Rank List