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

Yes, that’s probably the case in practice, but it is never said in the docs that you MUST assign ref value during the first render. In theory it is possible that is for some reason assigned during DevTools render. That would probably require reading some external mutable value, which is not recommended, but people do it all the time

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