Closed
Description
Initial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- I searched issues and couldn’t find anything (or linked relevant results below)
Problem
As can be seen here, React keys are generated using the name, line, column, and node index. This means that:
- If the type is changed, it will be presented to React as a new node.
- If a user enters a newline above the node, it will be presented to React as a new node.
- If a user changes the content above the node to change the node count (i.e. splitting one paragraph into two), it will be presented to React as a new node.
This means the key is explicitly unoptimized for React re-rendering.
Solution
The key should be calculated as the nth instance if that tag name.
I.e. the following markdown:
# Title
This is a paragraph

This is another paragraph
should be represented as:
<h1 key="h1-0" />
<p key="p-0" />
<img key="img-0" />
<p key="p-1" />
This way if a paragraph changes, only that paragraph is changed. If another paragraph is inserted or removed, only all paragraphs that come after the edited paragraph are rerendered.
Alternatives
- Don’t specify a key. This is more performant than the current situation, but React will show warnings.
- Change the key to just the index. This is the default behaviour if a key is missing, but React won’t show a warning.