Skip to content

Refactor fill component to avoid relying on componentWillUpdate and use React Hooks instead#15541

Merged
youknowriad merged 2 commits intomasterfrom
update/slot-fill-react-deprecated-api
May 21, 2019
Merged

Refactor fill component to avoid relying on componentWillUpdate and use React Hooks instead#15541
youknowriad merged 2 commits intomasterfrom
update/slot-fill-react-deprecated-api

Conversation

@youknowriad
Copy link
Copy Markdown
Contributor

Refs #11360

I'm not familiar with the details of the slot/fill implementation especially the occurences thing so please make sure to test this extensively.

Testing instructions

  • Check the block toolbars and inspectors
  • Check the plugin slots (install dropit or similar...)

@youknowriad youknowriad added the [Type] Code Quality Issues or PRs that relate to code quality label May 9, 2019
@youknowriad youknowriad self-assigned this May 9, 2019
@youknowriad youknowriad mentioned this pull request May 9, 2019
12 tasks
@aduth
Copy link
Copy Markdown
Member

aduth commented May 9, 2019

I'm not familiar with the details of the slot/fill implementation especially the occurences thing

Some more context at #3472 (comment) . I think the main idea is to force all fills to render again via key when another fill is removed.

I worry a bit that it might rely on very specific lifecycle timing (the before render behavior of componentWillUpdate vs. the after behavior of componentDidUpdate / useEffect). I'd wonder too if there's some way this could be eliminated / reimplemented.

@youknowriad
Copy link
Copy Markdown
Contributor Author

@aduth do you know if there's a test covering this as it would help here.

@aduth
Copy link
Copy Markdown
Member

aduth commented May 9, 2019

@youknowriad There was a test case added in the relevant commit, yes. In that case, we may be able to judge by this passing.

73c3e30#diff-a7594baf81b70f7a01447aee3dedcb2bR100

@youknowriad
Copy link
Copy Markdown
Contributor Author

Ok tests are failing which is good as it confirms the issue but the issue is I have no idea how to fix this right now. I'll probably rethink about it tomorrow.

@youknowriad
Copy link
Copy Markdown
Contributor Author

I give up on this one, I was not able to make the tests pass. I feel like I'm not far from finding a solution though.

@youknowriad youknowriad deleted the update/slot-fill-react-deprecated-api branch May 14, 2019 09:56
@youknowriad youknowriad restored the update/slot-fill-react-deprecated-api branch May 20, 2019 08:53
@youknowriad youknowriad reopened this May 20, 2019
@youknowriad
Copy link
Copy Markdown
Contributor Author

I think I found a fix for the reordering issue, let's see what the tests say.

Copy link
Copy Markdown
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's complex stuff. I don't fully understand all changes applied but based on Travis reaction I'm happy with the proposal :)

I strongly recommend another pair of eyes on this PR before you proceed.

function FillComponent( { name, getSlot, children, registerFill, unregisterFill } ) {
// Random state used to rerender the component if needed, ideally we don't need this
const [ , updateRerenderState ] = useState( {} );
const rerender = () => updateRerenderState( {} );
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, not sure which one is best. I guess it doesn't matter that much

@youknowriad youknowriad merged commit c38327d into master May 21, 2019
@youknowriad youknowriad deleted the update/slot-fill-react-deprecated-api branch May 21, 2019 08:08
@youknowriad youknowriad added this to the 5.8 (Gutenberg) milestone May 24, 2019
@veeramarni
Copy link
Copy Markdown

veeramarni commented Jun 3, 2019

@youknowriad just checking whether it was ever merged to master as I don't find it in the master that uses react-hooks.

@youknowriad
Copy link
Copy Markdown
Contributor Author

Yes, this was merged. you're maybe looking at the wrong master (your fork or something?)

@veeramarni
Copy link
Copy Markdown

Oh sorry, i see it now.

@gziolo
Copy link
Copy Markdown
Member

gziolo commented Jun 5, 2019

This RR might introduce a regression which isn't covered with tests:

#15641 and #15516 (comment)

@aduth
Copy link
Copy Markdown
Member

aduth commented Jun 5, 2019

This RR might introduce a regression which isn't covered with tests:

#15641 and #15516 (comment)

Per #15541 (comment), it is intended to be covered with tests, though if it is in-fact a regression, it would appear coverage could be improved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Type] Code Quality Issues or PRs that relate to code quality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants