17. useEffect Hook#

The useEffect hook is called on specific external events. For example the useEffect hook is called after the component is rendered. We can use this hook to do additional calls. In our case we want to fetch the initial data from the backend.

  useEffect(() => {
    dispatch(getFaqItems());
  }, [dispatch]);

The getFaqItems method is called using the dispatch hook. The full Faq component will now look like this:

import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

import { addFaqItem, getFaqItems } from "../actions";
import FaqItem from "./FaqItem";

function Faq() {
  const faqList = useSelector((state) => state.faq);
  const dispatch = useDispatch();

  const [question, setQuestion] = useState("");
  const [answer, setAnswer] = useState("");

  const onChangeAnswer = (e) => {
    setAnswer(e.target.value);
  };

  const onChangeQuestion = (e) => {
    setQuestion(e.target.value);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    setQuestion("");
    dispatch(addFaqItem(question, answer));
    setAnswer("");
  };

  useEffect(() => {
    dispatch(getFaqItems());
  }, [dispatch]);

  return (
    <div>
      <ul>
        {faqList.map((item, index) => (
          <FaqItem
            key={index}
            question={item.question}
            answer={item.answer}
            index={index}
          />
        ))}
      </ul>
      <form onSubmit={onSubmit}>
        <label>
          Question:{" "}
          <input
            name="question"
            type="text"
            value={question}
            onChange={onChangeQuestion}
          />
        </label>
        <label>
          Answer:{" "}
          <textarea name="answer" value={answer} onChange={onChangeAnswer} />
        </label>
        <input type="submit" value="Add" />
      </form>
    </div>
  );
}

export default Faq;