Should I use React.js to work with the API, or will it work anyway?

Question

PHP

We have:
- API, like VK, to which we send a request for js, the answer comes in jsonp.
- In this case, the scheme does not always work out: the answer came - parsed - inserted. Sometimes you need to pre-process the data, perhaps group it, slightly filter it by a certain attribute, etc.
- Also, the expectation that the site using the API will be used on mobile devices too (that is, they are weaker than stationary ones)
Accordingly, how to be?
They say that until now rendering by the server side is faster than by the client. On the other hand, if this were the case, then all sorts of angular and react would not be used ...
Here are several output options:
1) The answer is helmet inphpfile (controller-> view) and there we push everything where necessary

<?php foreach ($users as $user):  ?>
<div id="users-wrap">
    <div class="user">
        Photo: <div class="user-photo"><?= $user['photo']; ?></div>
        Name: <div class="user-name"><?= $user['name']; ?></div>
        Age: <div class="user-age"><?= $user['age']; ?></div>
        
        favorite:
        Books: <div class="favorite-books"><?= $user['books']; ?></div>
        Videos: <div class="favorite-videos"><?= $user['videos']; ?></div>
    </div>  
</div>
<?php endforeach; ?>

2) Cooler. Also the answer helmet in phpand there:

<?php 
echo '<div id="users-wrap">
    <div class="user">
        Photo: <div class="user-photo">'. $user['photo']; .'</div>
        Name: <div class="user-name">'. $user['name']; .'</div>
        Age: <div class="user-age">'. $user['age']; .'</div>
        
        favorite:
        Books: <div class="favorite-books">'. $user['books']; .'</div>
        Videos: <div class="favorite-videos">'. $user['videos']; .'</div>
    </div>  
</div>';
?>

3) react

var User = React.createClass({
  rawMarkup: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },

  render: function() {
    return (
      <div className="user">
    Photo: <div class="user-photo">{this.props.photo}</div>
    Name: <div class="user-name">{this.props.name}</div>
        Age: <div class="user-age">{this.props.age}</div>
        
        favorite:
        Books: <div class="favorite-books">{this.props.books}</div>
        Videos: <div class="favorite-videos">{this.props.videos}</div>        
      </div>
    );
  }
});


var UserList = React.createClass({
  render: function() {
    var userNodes = this.props.data.map(function(user) {
      return (
        <User name={user.name} key={user.id} age={user.age} photo={user.photo} books={user.books} videos={user.videos}></User>
      );
    });
    return (
      <div>
        {userNodes}
      </div>
    );
  }
});

ReactDOM.render(
  <UserList data={users} />,
  document.getElementById('users-wrap')
);

where {users} is the data that will arrive from the request
4) react + php hybrid (something else meaningless)
I haven’t figured out how to implement it foreachin the react concept so that it ends up like this:

<?php foreach ($users as $user):  ?>

var User = React.createClass({
  rawMarkup: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },

  render: function() {
    return (
      <div className="user">
    Photo: <div class="user-photo"><?= $user['photo']; ?></div>
    Name: <div class="user-name"><?= $user['name']; ?></div>
        Age: <div class="user-age"><?= $user['age']; ?></div>
        
        favorite:
        Books: <div class="favorite-books"><?= $user['books']; ?></div>
        Videos: <div class="favorite-videos"><?= $user['videos']; ?></div>        
      </div>
    );
  }
});

ReactDOM.render(
  <User data={users} />
);

<?php endforeach; ?>

But an inflamed brain can end up doing a lot ...
5) some other option
-------------------------------- ----
If you read to the end, showed willpower, then the question is: which option, taking into account the requirements, is at least somehow more appropriate? Will pure react be faster given the requirements, or can you do the 1st option and not take a steam bath? Or some other option that is not described here?

Answer 1

I am using react with php. react is only for displaying to the user and small conversions (date-time and the like), everything happens in php and the react receives json variables and you don’t need to throw them as html on the page (why then do you need a react?)