React JS Best Practice

Question

I am planning to use my state as a form of signaling that I will gonna change back and forth to show my loading screen, main form and success or error message. But not sure if this is the best practice. Here is a sample code

div hidden={this.state.FormStatus.statusMode !== "Loading"}>
          <LoadingScreen />
        </div> 

div hidden={this.state.FormStatus.statusMode !== "Main"}>
          <MainForm/>
        </div>

But I am not sure if this is the best way, I am worried that it can slowdown my application or eat my clients CPU with this one. Can you suggest better method?

Instead of hidden you can use if else. to prevent the form from loading into dom. — Just code, Sep 14 '18 at 17:58
Possible duplicate of [Show or hide element in React](https://stackoverflow.com/questions/24502898/show-or-hide-element-in-react) — JJJ, Sep 14 '18 at 17:59
Do you want to have the div's present in the DOM? Otherwise I wouldn't load them at all. — Moritz Schmitz v. Hülst, Sep 14 '18 at 18:00
Have a look at the "Simple Everyday Patterns" section on this page: https://lucasmreis.github.io/blog/simple-react-patterns/ — Jeremy, Sep 14 '18 at 18:07
I added div because custom component cannot use hidden property — Hawk, Sep 14 '18 at 18:31

score 4 · Answer 1 · edited Sep 14 '18 at 18:14

4

render() {
  const { statusMode } = this.state.FormStatus;

  if (statusMode === 'Loading') {
    return <LoadingScreen />;
  } else if (statusMode === 'Main' {
    return <MainForm />;
  }
}

or

render() {
  const { statusMode } = this.state.FormStatus;

  return (
    <div>
      <span>Something you want to display no matter what</span>
      {statusMode === 'Loading' && <Loading />}
      {statusMode === 'Main' && <Main />}
    </div>
  );
}

edited Sep 14 '18 at 18:14

n1stre

5,856
4
20
41

answered Sep 14 '18 at 18:02

Arek C.

1,271
2
9
17

This is really nice ill try it. – Hawk Sep 14 '18 at 18:32

Moritz Schmitz v. Hülst · Answer 2 · 2018-09-14T18:31:02.230

0

Not sure how the performance improvement is over what you are doing but here is an idea.

render() {
  const { FormStatus: { statusMode } } = this.state;
  const component = { Loading: <LoadingScreen />, Main: <MainForm /> };

  return component[this.state.FormStatus.statusMode];
}

For the record, what you are doing is fine. Only real improvement is to only render one div instead of two.

edited Sep 14 '18 at 18:31

answered Sep 14 '18 at 18:06

Moritz Schmitz v. Hülst

3,229
4
36
63

score 0 · Answer 3 · answered Aug 19 '22 at 15:50

0

If you using hook then,

const Example = () => {
     const [loading, setLoading] = React.useState(true)

     return (
        <>
           {loading && <Loading />}
           {!loading && <Main/> }
        </>
     )   
}

answered Aug 19 '22 at 15:50

Arnob

27
8

React JS Best Practice

3 Answers3