0

I've a multiple page site. I created a single component enclosing all the texts/para/images. I've refered this component to all the multiple pages. I used a class name to hide/show the content to the respective pages via css. Problem is that the page load is slow. Since all contents are hidden using css they are still loaded making my site slow. Any help on this is much appreciated. Thanks

SajZ
  • 262
  • 3
  • 16
  • Appreciate your answer. I don't want to hide things because the content are heavy. At the same time contents should be in a single component for easy accessibility. Is there a way to return only the content section that is required for the respective page. Thanks – SajZ Mar 07 '20 at 07:06
  • so this should return page1 content const ContentComponent =() => {return( page1= { /contents/} )}. How to do something like this – SajZ Mar 07 '20 at 07:20

1 Answers1

0

There are multiple things you can check.

  1. Check the internet connectivity, I hope you have good internet connectivity to load the page.

  2. As you say there are multiple page with single component, check if you can move those into sub-component.

  3. I am not sure how you're hiding those components use css property display:none if those are light weight.

you can use something like this:

<style type="text/css">
  .hidden { display:none; }
</style>

render: function() {
return (
  <div className={this.props.shouldHide ? 'hidden' : ''}>
    This will be hidden if you set <tt>props.shouldHide</tt> 
    to something truthy.
  </div>
 );
}
// or in more modern JS and stateless react
const Example = props => <div className={props.shouldHide}/>Hello</div>

source

Manjuboyz
  • 6,978
  • 3
  • 21
  • 43