Skip to content

Conversation

chack1172
Copy link
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
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