CODEWITHSUNDEEP
javascripthtmlreactjs
naveen
naveen

Reputation: 610

react componentDidMount is called executing after render

I am new to React JS and I am now puzzled by the way how component life cycle methods work; which is entirely in contradiction with ReactJS.org docs in my case. The componentDidMount() should execute before render() is what the expected behaviour, but render() executes before componentDidMount().

My source code : 

import React from 'react';
import '../main.css';
//import sam from "../images/gallery/Farmer1.jpg";
import galleries from './GalleryImages.js';
class Gallery extends React.Component {
  constructor(props) {
    super(props);
  }
  cache = {};
  dummy = './Farmer1.jpg';
  importAll = (r, ping) => {
    console.log(ping + ' called');
    r.keys().forEach(key => {
      this.cache[key] = r(key);
      console.log(`key is ${key} and value : ${r(key)}`);
      this.dummy = r(key);
    });
    console.log(this.cache);
  };
  componentDidMount() {
    this.importAll(
      require.context('../images/gallery/', false, /\.jpg$/),
      'mount'
    );
  }
  render() {
    //this.importAll(require.context('../images/gallery/', false, /\.jpg$/),"render");
    console.log(this.cache);
    const gallery = galleries.map(gallery => {
      return (
        <a
          className="spotlight"
          href={gallery.src}
          data-title={gallery.title}
          data-description={gallery.description}
        >
          {console.log(this.cache[gallery.src])}
          <img src={this.cache[gallery.src]} />
        </a>
      );
    });
    return (
      <div className="container margintop150">
        <div className="greentext center">
          <h4>
            {' '}
            <b>Gallery</b>
          </h4>
        </div>
        <h5 className="type_5" />
        <div className="row">
          <div
            className="spotlight-group"
            data-title="Untitled"
            data-animation="fade"
            data-fullscreen="false"
            data-maximize="false"
            data-minimize="false"
          >
            {gallery}
          </div>
        </div>
      </div>
    );
  }
}
export default Gallery;

//GalleryImages.js
const galleries = [
  {
    src: './Farmer2.jpg',
    title: 'Farmer2',
    description: 'farmer2'
  },
  {
    src: './Farmer1.jpg',
    title: 'Farmer1',
    description: 'farmer1'
  },
  {
    src: './Farmer3.jpg',
    title: 'Farmer3',
    description: 'farmer3'
  }
];
export default galleries;

the class variable this.cache is null if this.importAll() is called in componentDidMount(), but it takes up the values if this.importAll() is called in render().

enter image description here

Upvotes: 0

Views: 959

Answers (3)

fisayo-dmg
fisayo-dmg

Reputation: 41

I think you are confusing componentWillMount() with componentDidMount(). componentWillMount() is called before the render while calling setState() in componentDidMount() can re-render the component

Upvotes: 1

Diamond
Diamond

Reputation: 3448

You misunderstood lifecycle in react js.

componentDidMount will be called after render is called at the first time.

For more information: The component lifecycle

Upvotes: 3

Vinicios Delabari Henriques
Vinicios Delabari Henriques

Reputation: 31

It's the right behavior, componentDidMount() is called after render.

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
* constructor()
* static getDerivedStateFromProps()
* render()
* componentDidMount()

The deprecated componentWillMount() is called before.

Note: These methods are considered legacy and you should avoid them in new code:

UNSAFE_componentWillMount()

Upvotes: 3

Related Questions