Is it appropriate to use useEffect to fetch new state when a prop changes?

Quite simply, yes, this is an appropriate and correct usage of the useEffect hook. The useEffect hook is used to issue side-effects, e.g. fetching data from an external resource, and its dependency array is used to control when the side-effect may be triggered again during the life of the component, e.g. when a prop value changes. An example scenario is fetching a user's post by their id.

const Component = ({ userId }) => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch(`/api/posts/${userId}`)
      .then(response => response.json())
      .then(posts => setPosts(posts));
  }, [userId]);

  ...

You do need Effects to synchronize with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query.

What you might be getting tripped up on in the rest of the "you might not need an effect" section is that it's trying to point out some general React anti-patterns and correct pattern(s) to use.

A few examples:

• "You don't need Effect to transform data for rendering"

  Just compute the transformed data directly and render. If it's "expensive" then use the useMemo hook to memoize the computed value.

• "You don't need Effects to handle user events"

  Don't set some state that an event happened so an effect can be issued, just issue the effect from the event handler. Think of a form onSubmit handler.

• Don't store props into local state and use a useEffect hook to synchronize the state to the prop value, just use the prop value directly.

For your specific code example this isn't an appropriate usage of the useEffect hook. The child component should just directly reference the currChildVal prop value and add 2 to it.

const Child = ({ parentVal }) => {
  return (
    <div style={{ border: "1px solid blue", margin: 30, padding: 10 }}>
      <span>childVal: {parentVal + 2}</span>
    </div>
  );
};

You can write a custom hook to provide you a previous props using useRef

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

and then use it in useEffect

const Component = (props) => {
    const {receiveAmount, sendAmount } = props
    const prevAmount = usePrevious({receiveAmount, sendAmount});
    useEffect(() => {
        if(prevAmount.receiveAmount !== receiveAmount) {
 
         // process here
        }
        if(prevAmount.sendAmount !== sendAmount) {
 
         // process here
        }
    }, [receiveAmount, sendAmount])
}

However its clearer and probably better and clearer to read and understand if you use two useEffect separately for each change if you want to process them separately

The second parameter in your useEffect is what the function listens to for changes. If you just want to rerun the function in useEffect when a specific variable changes, add it to the array. For example, if you want to rerun it when variable x changes, you would write it like this:

React.useEffect(() => { /* do stuff */ }, [counter, x]);

Documentation: Conditionally firing an effect

Update: Why you don't store connectionParams in a useState? This way you can pass them and rerender correctly.

const [connectionParams, setConnectionParams] = useState({});

return <SqlSchema connectionParams={connectionParams} setConnectionParams={setConnectionParams} />

You are creating a new connection of every render of the Parent sqlConnection={new SqlConnection()}. Try creating the connection on mount and then pass the variable to the child.

If the value of props.filters did not change, then React would skip the effect.

// This will only re-run if the value of `props.filters` changes
useEffect(() => {
  fetchSomeData(props.filters);
}, [props.filters]);

With hooks, React does this internally unlike the implementation using componentDidUpdate where we have to compare the value of prevProps and nextProps against each other.

See optimizing performance by skipping effects.

you need to have a useEffect in your child component to copy over the changing prop that parent sends down since you are initializing your local state from that prop.

import React, {useEffect, useState } from 'react';

export default ({ initialMap }) => { 

  const [map, setMap] = useState(new Map(initialMap));
  console.log(`parent map: ${initialMap.get('name')} --- child map: ${map.get('name')}`);

  // this is what you need
  useEffect(() => {
    setMap(new Map(initialMap))
  }, [initialMap])

  const onChange = (value) => {
    setMap(prevMap => {
      prevMap.set('name', value);
      return prevMap;
    });
  };

  return (
    <div>
      <label>Input initial value should be 'world':</label>  
      <input value={map.get('name')} 
        onChange={e => onChange(e.target.value)} />
    </div>
  ); 
};

The function given as first argument to useEffect will run every time any of the elements in the array given as second argument change, so you can put the props in this array to make it run again when any of the props change.

Example

function App(props) {
  useEffect(() => {
    let userTags = [];

    props.question.tagVotes.forEach(tagVote => {
      if (_.includes(tagVote.users, props.user.username)) {
        userTags.push(tagVote.tag);
      }
    });

    setChosenTags(userTags);
  }, [props.question]);

  // ...
}

The state is being mutated directly in the parent's onChange and hence your useEffect in ReadOnly component is not being triggered.

Update your onChange

const onChange = (e: IChangeEvent<any>) => {
    setFormDataAndIncludings(prev => ({
            ...prev ,
            queryData : [
                e.formData,
                ...prev.queryData.slice(0,1)
            ]
        }))

    //const newFormDataAndIncludings = { ...formDataAndIncludings };
    //newFormDataAndIncludings.queryData[0] = e.formData;
    //setFormDataAndIncludings(newFormDataAndIncludings);
};

Provide useEffect dependency as usual

React.useEffect(() => {
        setValue(firstName());
    }, [formContext]);

Since I didn't see your useEffect implementation I would suggest you check the dependency array of useEffect hook. You must pass the prop to the dependency array.

2nd guess, If you wrapped your component with another component created with memo/useMemo and the props were not passed into the dependency array, it wouldn't re-render.

useEffect(() => {
      // Your Code
    }, [theProps])