Allow function as children component in react Deferred and WhenVisible

[chack1172]

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:

• The PR already includes some types changes added in Use ReactNode type for children props #2385
• The documentation on website should be updated to include this new pattern