You can turn it into custom hook (new documentation page: Reusing Logic with Custom Hooks), like so:

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

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        if (didMount.current) func();
        else didMount.current = true;
    }, deps);
}

export default useDidMountEffect;

Usage example:

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

import useDidMountEffect from '../path/to/useDidMountEffect';

const MyComponent = (props) => {    
    const [state, setState] = useState({
        key: false
    });    

    useEffect(() => {
        // you know what is this, don't you?
    }, []);

    useDidMountEffect(() => {
        // react please run me if 'key' changes, but not on initial render
    }, [state.key]);    

    return (
        <div>
             ...
        </div>
    );
}
// ...

useEffect is called after the first render however the issue in your code is that the words state isn't updated when you think it is.

useEffect(() => {
        setWords(sentence.split(' ')); 
// Here you set the words state that will trigger a new render. However the words variable is empty won't be changed until the next render


        words.map(word =>{ //Here you call map on an empty array.
          if(word.length <= 2){
            scrambledWord.push(word);

          }
          else{
            scrambledWord.push(scrambleWord(word));
          }
        })

        setScrambledSentence(scrambledWord.join(' ')); 
        //Here you set the state on an empty string
      }, [])
// the useEffect doesn't run a second time because it has no dependencies.

This code should work:

    const ScrambleSentence = ({sentence}) => {
    const [scrambledSentence, setScrambledSentence] = useState('');


    function scrambleWord(n){
        var text = n.split('');
        for(var i = text.length - 1; i > 0; i--){
            var j = Math.floor(Math.random() * (i + 1));
            var temp = text[i];
            text[i] = text[j];
            text [j] = temp;
        }
        return text.join('');
    }

    useEffect(() => {
        let scrambledWord = [];
        const words = sentence.split(' ')
        words.forEach(word =>{
          if(word.length <= 2){
            scrambledWord.push(word);
          }else{
            scrambledWord.push(scrambleWord(word));
          }
        })

        setScrambledSentence(scrambledWord.join(' '));
      }, [])


      console.log(scrambledSentence);
    return (
        <div>
            <p id='scrambled-word'>{scrambledSentence}</p>
        </div>
    )
};

export default ScrambleSentence;

https://reactjs.org/docs/hooks-state.html

https://reactjs.org/docs/hooks-effect.html

You are combining two things:

• When useEffect is Run
• Receiving a Response from the server

To actually test out whether useEffect ran, you can:

• Add a console.log before that request and see if it got logged
• Inspect your Network Tab to see if a Request to the Endpoint was triggered

Since your UI is dependent upon the response, it will be a good thing to add a:

• Loader
• Fallback component in case the response received is not valid

useEffect is supposed to run on every render unless a dependency array is provided, which will ensure that it only runs if a dependency changes. By providing an empty array, you are limiting useEffect to run on JUST the first render.