Improve quick info on JSX component elements
See original GitHub issueTS Template added by @mjbvz
TypeScript Version: 4.4.0-dev.20210713
Search Terms
- react
- prop-types
- jsx
Does this issue occur when all extensions are disabled?: Yes
- VS Code Version: 1.58.2 (was happening before this version as well)
- OS Version: Mac OS 10.14
Steps to Reproduce:
- Create a React functional component like this:
import React from "react";
import PropTypes from "prop-types";
// vscode is able to infer the types correctly in autocomplete
// as this is a functional component, with prop types
// Please note that vscode still does not show the correct types
// when hovering on the component usage
function MyComponent({ prop1, prop2, prop3 }) {
return (
<div>
<span>{prop1}</span>
<span>{prop2}</span>
</div>
);
}
MyComponent.propTypes = {
prop1: PropTypes.string.isRequired,
prop2: PropTypes.bool,
prop3: PropTypes.shape({
p1: PropTypes.string
})
};
MyComponent.defaultProps = {
prop2: false
};
export default MyComponent;
- At the point of usage, where you have imported this component, hover on the usage, you will see that vscode is able to identify the function signature, but not the types of the function arguments, and shows them as
any
- If you hovber over the specific prop though, you would see that vscode shows the correct type (inferred from prop types) and also provides autocompletion for the prop name. (Although there is still an issue that it shows all the props as optional)
Example:
Expectation:
I would have expected that
- vscode would be able to infer the types on hovering as well, same as it can do while providing autocomplete suggestion for the prop
- vscode would not show all the props as optional, since it seems that it can infer prop names and types from prop types, it should also be able to infer whether it is required or optional.
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Improve quick info on JSX component elements · Issue #45140
Steps to Reproduce: Create a React functional component like this: ... propTypes = { prop1: PropTypes.string.isRequired, prop2: PropTypes.bool, ...
Read more >How to Optimize Components to Improve React Performance
In this tutorial, you will learn how to maximize React performance by measuring rendering bottlenecks and optimizing your components.
Read more >4 Ways to Improve React Component Rendering Speed
This tool is particularly useful in visualizing components that excessively re-render. It can give a good overview of the “health” of your ...
Read more >How To Create React Elements with JSX - DigitalOcean
In this step, you'll style the elements in your component to learn how HTML attributes work with JSX. There are many styling options...
Read more >How To Speed Up Data Heavy React Components
How To Speed Up Data-Heavy React Components · Simple Technique To Boost Performance · heavy-update-as-urgent · Prioritizing UI Updates For ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’ve moved that to #45223
yeah, we have been using jsdoc comments in some cases as well, but that just adds up one more point for documentation. We use proptypes for dynamic type checking, if we add jsdoc comments as well, that slightly duplicates the effort. Some of the tools that we use can read comments on the prop types and generate documentation, so we add comments there anyway, we would need to repeat that in jsdoc