Mixing
How to track React hooks?
Before working on a new React project, I want to be sure that there are (or will be), good developer tools to support it.
One of the things I like with React is the React Developer tool for Google Chrome. It lets me inspect the internal state for each component.
The question: Does the React Developer tool show the hooks state of a React component?
If not, how can I inspect the internal hooks state (Aka effect), outside of the React component?
javascript reactjs react-hooks
edited Nov 20 '18 at 16:26
Yangshun Tay
8,96653667
asked Nov 19 '18 at 16:58
Aminadav Glickshtein
8,11243079
add a comment |
Before working on a new React project, I want to be sure that there are (or will be), good developer tools to support it.
One of the things I like with React is the React Developer tool for Google Chrome. It lets me inspect the internal state for each component.
The question: Does the React Developer tool show the hooks state of a React component?
If not, how can I inspect the internal hooks state (Aka effect), outside of the React component?
javascript reactjs react-hooks
edited Nov 20 '18 at 16:26
Yangshun Tay
8,96653667
asked Nov 19 '18 at 16:58
Aminadav Glickshtein
8,11243079
1
not yet
– skyboyer
Nov 19 '18 at 19:09
1
the devtools support for hooks is WIP and is not available yet..
– Shubham Khatri
Nov 19 '18 at 19:12
add a comment |
Before working on a new React project, I want to be sure that there are (or will be), good developer tools to support it.
One of the things I like with React is the React Developer tool for Google Chrome. It lets me inspect the internal state for each component.
The question: Does the React Developer tool show the hooks state of a React component?
If not, how can I inspect the internal hooks state (Aka effect), outside of the React component?
javascript reactjs react-hooks
edited Nov 20 '18 at 16:26
Yangshun Tay
8,96653667
asked Nov 19 '18 at 16:58
Aminadav Glickshtein
8,11243079
Before working on a new React project, I want to be sure that there are (or will be), good developer tools to support it.
One of the things I like with React is the React Developer tool for Google Chrome. It lets me inspect the internal state for each component.
The question: Does the React Developer tool show the hooks state of a React component?
If not, how can I inspect the internal hooks state (Aka effect), outside of the React component?
javascript reactjs react-hooks
javascript reactjs react-hooks
edited Nov 20 '18 at 16:26
Yangshun Tay
8,96653667
asked Nov 19 '18 at 16:58
Aminadav Glickshtein
8,11243079
edited Nov 20 '18 at 16:26
Yangshun Tay
8,96653667
asked Nov 19 '18 at 16:58
Aminadav Glickshtein
8,11243079
edited Nov 20 '18 at 16:26
Yangshun Tay
8,96653667
edited Nov 20 '18 at 16:26
Yangshun Tay
8,96653667
edited Nov 20 '18 at 16:26
Yangshun Tay
8,96653667
8,96653667
asked Nov 19 '18 at 16:58
Aminadav Glickshtein
8,11243079
asked Nov 19 '18 at 16:58
Aminadav Glickshtein
8,11243079
asked Nov 19 '18 at 16:58
Aminadav Glickshtein
8,11243079
8,11243079
1
not yet
– skyboyer
Nov 19 '18 at 19:09
1
the devtools support for hooks is WIP and is not available yet..
– Shubham Khatri
Nov 19 '18 at 19:12
add a comment |
1
not yet
– skyboyer
Nov 19 '18 at 19:09
1
the devtools support for hooks is WIP and is not available yet..
– Shubham Khatri
Nov 19 '18 at 19:12
1
1
not yet
– skyboyer
Nov 19 '18 at 19:09
not yet
– skyboyer
Nov 19 '18 at 19:09
1
1
the devtools support for hooks is WIP and is not available yet..
– Shubham Khatri
Nov 19 '18 at 19:12
the devtools support for hooks is WIP and is not available yet..
– Shubham Khatri
Nov 19 '18 at 19:12
add a comment |
1 Answer
1
active
oldest
votes
Short answer is no, React Devtool doesn't exactly show the hooks state of components the way you want it to. You could track the progress of its implementation here.
The long answer is yes, the React Devtool technically does show state for hooks, but not in a user-friendly format that you are used to. The state is being shown in its raw implementation form, which resembles a linked list:
{
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: {
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: ..., // The list goes on
queue: ...,
},
queue: ...
}
For a simple component with two states, the Devtool shows state as an object with baseState field as the first state value of 'Mary' and there's a next field which points to another state object which corresponds to the second state value, and it has the baseState value of 10.
function App() {
const [name, setName] = useState('Mary');
const [age, setAge] = useState(10);
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
answered Nov 20 '18 at 5:19
Yangshun Tay
8,96653667
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379392%2fhow-to-track-react-hooks%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Short answer is no, React Devtool doesn't exactly show the hooks state of components the way you want it to. You could track the progress of its implementation here.
The long answer is yes, the React Devtool technically does show state for hooks, but not in a user-friendly format that you are used to. The state is being shown in its raw implementation form, which resembles a linked list:
{
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: {
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: ..., // The list goes on
queue: ...,
},
queue: ...
}
For a simple component with two states, the Devtool shows state as an object with baseState field as the first state value of 'Mary' and there's a next field which points to another state object which corresponds to the second state value, and it has the baseState value of 10.
function App() {
const [name, setName] = useState('Mary');
const [age, setAge] = useState(10);
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
answered Nov 20 '18 at 5:19
Yangshun Tay
8,96653667
add a comment |
Short answer is no, React Devtool doesn't exactly show the hooks state of components the way you want it to. You could track the progress of its implementation here.
The long answer is yes, the React Devtool technically does show state for hooks, but not in a user-friendly format that you are used to. The state is being shown in its raw implementation form, which resembles a linked list:
{
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: {
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: ..., // The list goes on
queue: ...,
},
queue: ...
}
For a simple component with two states, the Devtool shows state as an object with baseState field as the first state value of 'Mary' and there's a next field which points to another state object which corresponds to the second state value, and it has the baseState value of 10.
function App() {
const [name, setName] = useState('Mary');
const [age, setAge] = useState(10);
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
answered Nov 20 '18 at 5:19
Yangshun Tay
8,96653667
add a comment |
Short answer is no, React Devtool doesn't exactly show the hooks state of components the way you want it to. You could track the progress of its implementation here.
The long answer is yes, the React Devtool technically does show state for hooks, but not in a user-friendly format that you are used to. The state is being shown in its raw implementation form, which resembles a linked list:
{
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: {
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: ..., // The list goes on
queue: ...,
},
queue: ...
}
For a simple component with two states, the Devtool shows state as an object with baseState field as the first state value of 'Mary' and there's a next field which points to another state object which corresponds to the second state value, and it has the baseState value of 10.
function App() {
const [name, setName] = useState('Mary');
const [age, setAge] = useState(10);
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
answered Nov 20 '18 at 5:19
Yangshun Tay
8,96653667
Short answer is no, React Devtool doesn't exactly show the hooks state of components the way you want it to. You could track the progress of its implementation here.
The long answer is yes, the React Devtool technically does show state for hooks, but not in a user-friendly format that you are used to. The state is being shown in its raw implementation form, which resembles a linked list:
{
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: {
baseState: ...,
baseUpdate: ...,
memoizedState: ...,
next: ..., // The list goes on
queue: ...,
},
queue: ...
}
For a simple component with two states, the Devtool shows state as an object with baseState field as the first state value of 'Mary' and there's a next field which points to another state object which corresponds to the second state value, and it has the baseState value of 10.
function App() {
const [name, setName] = useState('Mary');
const [age, setAge] = useState(10);
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
answered Nov 20 '18 at 5:19
Yangshun Tay
8,96653667
answered Nov 20 '18 at 5:19
Yangshun Tay
8,96653667
answered Nov 20 '18 at 5:19
Yangshun Tay
8,96653667
answered Nov 20 '18 at 5:19
Yangshun Tay
8,96653667
8,96653667
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379392%2fhow-to-track-react-hooks%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
not yet
– skyboyer
Nov 19 '18 at 19:09
1
the devtools support for hooks is WIP and is not available yet..
– Shubham Khatri
Nov 19 '18 at 19:12