React-devtools: Support editable props for function components in v16

[Falieson]

Maybe i'm missing something? The repo I'm newly working on makes extensive use of styled components. Similarly to https://github.com/facebook/react-devtools/issues/868 , a lot of the components' Props are read-only.
While PR #911 was supposed to resolve this issue, it doesn't seem to have. Since my comments and other peoples on #868 are ignored by the close issue I'm opening up a new issue to restart the conversation.

[bvaughn]

Hi @Falieson :wave:

I'd like to provide a bit of context on why this isn't supported, but before I do– I want to say that I understand why this feature would be useful. (To clarify, what w'ere talking about is the ability for DevTools to edit props for function components.)

First a bit of background: React DevTools tries to support all versions of React. To do this, it uses adapters (each of which know about the implementation details of specific React versions) to convert React's state into a consistent format that the DevTools UI can read and write data from.

The specific PR you mentioned (#911) added support for editing function component's props to the adapter that supports React versions v12-15. The current React version, v16, uses a different adapter (with the relevant code here).

Unfortunately, we can't do the same thing for v16 as we did for v15. In older versions of React, function components were wrapped in a special StatelessCompoenent object to create fake "instances". DevTools was able to use this wrapper to force updates on a specific function component.

React's new "fiber" architecture introduced with version 16 no longer wraps function components. We do this for performance reasons (speed and memory efficiency) but a downside is that DevTools has no way to schedule an update for a function component. (DevTools _could_ modify props values, but has no way to ask React to re-render that specific component afterward.) The design of DevTools degrades gracefully in this case by providing a read-only view of the props.

I haven't dug into this area of DevTools before, but based on my understanding of React and DevTools– this isn't something we could add support for without making some non-trivial changes on the React side (e.g. giving DevTools a way to scheduleWork with the reconciler).

So for the time being, function component props will remain read-only. It's not ideal, but I hope this explanation at least helps convey why the current behavior exists. 🙇

[bvaughn]

Quick note: I'm going to re-open this issue for now, until I've had a chance to chat with the rest of the team about this. Seems like as "hooks" become more prevalent, this will impact more users/apps. Maybe it's worth addressing.