componentWillMount for react functional component?

user_8290251 0
Viewed 12451

I want to know for react class component we have componentWillMount() lifecycle method, where we can perform tasks before loading the component. Tasks like, a call to backend and use the response to show that data in that frontend. What if I want the same thing in a functional component? like I have used react chartJS and for that the data values I want to be retrieved from backend response, and then the chart will populate based on those datas.

I hope I explained the problem statement well, if not please ask for any information.

react-chartjs react-functional-component reactjs
2 Answers

componentWillMount is call only one time before initial render. I make a sample code, check it out below

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [mounted, setMounted] = useState(false)

  if(!mounted){
    // Code for componentWillMount here
    // This code is called only one time before intial render
  }

  useEffect(() =>{
    setMounted(true)
  },[])

  return (
    <div className="App">
      
    </div>
  );
}

  • As you mentioned you want to make an api call, it usually happen in componentDidmount and you can simply use useEffect hook with empty array as dependencies in functional component

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [mounted, setMounted] = useState(false)


  useEffect(() =>{
    // This is similar to componentDidMount
    // Call back-end api here
  },[])

  return (
    <div className="App">
      
    </div>
  );
}

user_133459640

Actually, I want to add more cases here, and I am going to make reusable custom hooks.

1.Care about extra dom render

It will not cause extra dom render

const useOptimizedComponentWillMount = callback => {
  const mounted = useRef(false)
  if (!mounted.current) callback()

  useEffect(() => {
    mounted.current = true
  }, []);
};

Note: You might want mounted && mounted.current in typescript

2. Don't care about extra dom render

this is exactly Tony answer

const useComponentWillMount = callback => {
  const [mounted, setMounted] = useState(false)
  if (!mounted) callback()

  useEffect(() => {
    setMounted(true)
  }, [])
};

Usage

const App = () => {
  useComponentWillMount(() => console.log("will mount"))
  return console.log("render-dom") || <div>Layout</div>
};
// will mount
// (2)render-dom

const App = () => {
  useOptimizedComponentWillMount(() => console.log("will mount"))
  return console.log("render-dom") || <div>Layout</div>
};
// will mount
// render-dom
user_103215310
Related