Skip to content

Allow function as children component in react Deferred and WhenVisible#2386

Merged
pascalbaljet merged 4 commits intoinertiajs:masterfrom
chack1172:feature/react-function-as-child
Jul 31, 2025
Merged

Allow function as children component in react Deferred and WhenVisible#2386
pascalbaljet merged 4 commits intoinertiajs:masterfrom
chack1172:feature/react-function-as-child

Conversation

@chack1172
Copy link
Copy Markdown
Contributor

This PR aims to improve the usability of Deferred and WhenVisible components without having to create extra components to render data. Is it not possible to write jsx data directly because even though the children is not rendered, React still evalutates it and errors are thrown for accessing undefined data.

This is not possible:

<Deferred data="options" fallback={<span>Loading select...</span>}>
<select>
{options.map({label, value} => <option value={value}>{label}</option>}
</select>
</Deferred>

With the new changes we can do this, in this way react will only evalutate the children if it is actually rendered:

<Deferred data="options" fallback={<span>Loading select...</span>}>
  {() => <select>
     {options.map({label, value} => <option value={value}>{label}</option>}
  </select>
</Deferred>

Notes:

@pascalbaljet
Copy link
Copy Markdown
Member

Thanks!

@pascalbaljet pascalbaljet merged commit 7a4312b into inertiajs:master Jul 31, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants