Ggthjy

Can a malicious addon access internet history and such in chrome/firefox?

Female=gender counterpart?

What if somebody invests in my application?

What was required to accept "troll"?

Is exact Kanji stroke length important?

Can the electrostatic force be infinite in magnitude?

Why are on-board computers allowed to change controls without notifying the pilots?

How can I raise concerns with a new DM about XP splitting?

I2C signal and power over long range (10meter cable)

Who must act to prevent Brexit on March 29th?

How do I repair my stair bannister?

Can a Bard use an arcane focus?

Greatest common substring

Meta programming: Declare a new struct on the fly

Identify a stage play about a VR experience in which participants are encouraged to simulate performing horrific activities

Blender - show edges angles “direction”

Is there enough fresh water in the world to eradicate the drinking water crisis?

How did Monica know how to operate Carol's "designer"?

What (else) happened July 1st 1858 in London?

Is there any significance to the Valyrian Stone vault door of Qarth?

Is a naturally all "male" species possible?

Is there an Impartial Brexit Deal comparison site?

How to check participants in at events?

How do ultrasonic sensors differentiate between transmitted and received signals?

Which is better conditional rendering or styling in reactjs? [on hold]

Simple ReactJS applicationReactJs Tabbed componentReactjs Tab ComponentSimple login using ReactJSCleaner way to write ReactJS componentA box for commentsReactJS - Exchange Rate AppBetter practice of return statement in ReactJSSimple JavaScript front-end framework for building web componentsSimple conditional operator optimization

0

$begingroup$

I want to toggle showing content using reactjs, and I have two options, applying the condition on rendering or on display? I'm asking which is better from performance.

Here's a running code from codesandbox

import React, { useState } from "react";

import ReactDOM from "react-dom";



import "./styles.css";



function App() {

  const [toggle, setToggle] = useState(true);

  const [toggle2, setToggle2] = useState(true);



  return (

    <div

      className="App"

      style={{ display: "flex", justifyContent: "space-around" }}

    >

      <div>

        {toggle && <h1>Rendering</h1>}

        <button onClick={() => setToggle(!toggle)}>Toggle</button>

      </div>

      <div>

        {<h1 style={{ ...(!toggle2 && { display: "none" }) }}>Styling</h1>}

        <button onClick={() => setToggle2(!toggle2)}>Toggle</button>

      </div>

    </div>

  );

}



const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

javascript react.js

share|improve this question

asked yesterday

Zeyad EtmanZeyad Etman

1786

$endgroup$

put on hold as off-topic by 200_success, yuri, Mast, Sᴀᴍ Onᴇᴌᴀ, Graipher 14 hours ago

This question appears to be off-topic. The users who voted to close gave this specific reason:

• "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Mast, Sᴀᴍ Onᴇᴌᴀ

If this question can be reworded to fit the rules in the help center, please edit the question.

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  $begingroup$
  The two techniques look the same, but they do different things. The right thing to do depends on the situation. In my opinion, this question is off-topic, because it is too generic and hypothetical.
  $endgroup$
  – 200_success
  yesterday
  

  
  
  
  

add a comment | 

0

$begingroup$

I want to toggle showing content using reactjs, and I have two options, applying the condition on rendering or on display? I'm asking which is better from performance.

Here's a running code from codesandbox

import React, { useState } from "react";

import ReactDOM from "react-dom";



import "./styles.css";



function App() {

  const [toggle, setToggle] = useState(true);

  const [toggle2, setToggle2] = useState(true);



  return (

    <div

      className="App"

      style={{ display: "flex", justifyContent: "space-around" }}

    >

      <div>

        {toggle && <h1>Rendering</h1>}

        <button onClick={() => setToggle(!toggle)}>Toggle</button>

      </div>

      <div>

        {<h1 style={{ ...(!toggle2 && { display: "none" }) }}>Styling</h1>}

        <button onClick={() => setToggle2(!toggle2)}>Toggle</button>

      </div>

    </div>

  );

}



const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

javascript react.js

share|improve this question

asked yesterday

Zeyad EtmanZeyad Etman

1786

$endgroup$

put on hold as off-topic by 200_success, yuri, Mast, Sᴀᴍ Onᴇᴌᴀ, Graipher 14 hours ago

This question appears to be off-topic. The users who voted to close gave this specific reason:

• "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Mast, Sᴀᴍ Onᴇᴌᴀ

If this question can be reworded to fit the rules in the help center, please edit the question.

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  $begingroup$
  The two techniques look the same, but they do different things. The right thing to do depends on the situation. In my opinion, this question is off-topic, because it is too generic and hypothetical.
  $endgroup$
  – 200_success
  yesterday
  

  
  
  
  

add a comment | 

$begingroup$

I want to toggle showing content using reactjs, and I have two options, applying the condition on rendering or on display? I'm asking which is better from performance.

Here's a running code from codesandbox

import React, { useState } from "react";

import ReactDOM from "react-dom";



import "./styles.css";



function App() {

  const [toggle, setToggle] = useState(true);

  const [toggle2, setToggle2] = useState(true);



  return (

    <div

      className="App"

      style={{ display: "flex", justifyContent: "space-around" }}

    >

      <div>

        {toggle && <h1>Rendering</h1>}

        <button onClick={() => setToggle(!toggle)}>Toggle</button>

      </div>

      <div>

        {<h1 style={{ ...(!toggle2 && { display: "none" }) }}>Styling</h1>}

        <button onClick={() => setToggle2(!toggle2)}>Toggle</button>

      </div>

    </div>

  );

}



const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

javascript react.js

share|improve this question

asked yesterday

Zeyad EtmanZeyad Etman

1786

$endgroup$

import React, { useState } from "react";

import ReactDOM from "react-dom";



import "./styles.css";



function App() {

  const [toggle, setToggle] = useState(true);

  const [toggle2, setToggle2] = useState(true);



  return (

    <div

      className="App"

      style={{ display: "flex", justifyContent: "space-around" }}

    >

      <div>

        {toggle && <h1>Rendering</h1>}

        <button onClick={() => setToggle(!toggle)}>Toggle</button>

      </div>

      <div>

        {<h1 style={{ ...(!toggle2 && { display: "none" }) }}>Styling</h1>}

        <button onClick={() => setToggle2(!toggle2)}>Toggle</button>

      </div>

    </div>

  );

}



const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

import React, { useState } from "react";

import ReactDOM from "react-dom";



import "./styles.css";



function App() {

  const [toggle, setToggle] = useState(true);

  const [toggle2, setToggle2] = useState(true);



  return (

    <div

      className="App"

      style={{ display: "flex", justifyContent: "space-around" }}

    >

      <div>

        {toggle && <h1>Rendering</h1>}

        <button onClick={() => setToggle(!toggle)}>Toggle</button>

      </div>

      <div>

        {<h1 style={{ ...(!toggle2 && { display: "none" }) }}>Styling</h1>}

        <button onClick={() => setToggle2(!toggle2)}>Toggle</button>

      </div>

    </div>

  );

}



const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

import React, { useState } from "react";

import ReactDOM from "react-dom";



import "./styles.css";



function App() {

  const [toggle, setToggle] = useState(true);

  const [toggle2, setToggle2] = useState(true);



  return (

    <div

      className="App"

      style={{ display: "flex", justifyContent: "space-around" }}

    >

      <div>

        {toggle && <h1>Rendering</h1>}

        <button onClick={() => setToggle(!toggle)}>Toggle</button>

      </div>

      <div>

        {<h1 style={{ ...(!toggle2 && { display: "none" }) }}>Styling</h1>}

        <button onClick={() => setToggle2(!toggle2)}>Toggle</button>

      </div>

    </div>

  );

}



const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

share|improve this question

asked yesterday

Zeyad EtmanZeyad Etman

1786

share|improve this question

asked yesterday

Zeyad EtmanZeyad Etman

1786

asked yesterday

Zeyad EtmanZeyad Etman

1786

asked yesterday

Zeyad EtmanZeyad Etman

1786